思源笔记编辑器区域水印 JS 代码块分享

前言

鉴于之前使用过的腾讯文档支持文档水印，后来使用思源笔记，在上课展示文档的时候，习惯性会给弄上水印，思源笔记本身似乎不支持直接在编辑器区域添加水印，故自己写了个 JS 代码片段。

代码片段

提醒：水印文本比较多的时候，改一下水印的宽度高度即 watermarkWidth、watermarkHeight，否则水印展示不全。

JS 代码片段：

let watermarkContent = "多仔ヾ";
let watermarkWidth = 120;
let watermarkHeight = 70;

let canvas = document.createElement("canvas");
let ctx = canvas.getContext('2d');
canvas.width = watermarkWidth;
canvas.height = watermarkHeight;
ctx.font = "14px Arial";
ctx.fillStyle = "rgba(211, 211, 211, .3)";
ctx.rotate((-25 * Math.PI) / 180);
ctx.fillText(watermarkContent, 0, canvas.height/2);

let watermarkDataURL = canvas.toDataURL('image/png');
const defaultStyle = document.createElement('style');
defaultStyle.innerHTML = `.protyle::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url(${watermarkDataURL});
    background-repeat: repeat;
    pointer-events: none;
    z-index: 10;
}`;
document.head.appendChild(defaultStyle);

​