前言
鉴于之前使用过的腾讯文档支持文档水印,后来使用思源笔记,在上课展示文档的时候,习惯性会给弄上水印,思源笔记本身似乎不支持直接在编辑器区域添加水印,故自己写了个 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);
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于