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