写了一个给网页添加水印的库

[tyx1703]

Github

Demo

介绍

Watermark 是一款方便快捷的给网页添加水印的库。目前可以设置的内容有：文本内容，文字颜色，字体，字体大小，旋转角度，行高。

原理

将设置好的文字，按照设置的样式绘制在 canvas 上面，利用.toDataURL()这个方法把 canvas 转成 base64，最后在 css 中设置其作为背景

最后

第一次写 js 的库，不知道什么地方需要注意，还请各位不吝赐教~😜

[xiaoxiuaoliang]

提个建议，支持水印置于顶层放置。因为有些场景下水印需要总是显示，不能被元素的背景颜色覆盖。

[tyx1703]

感谢，不过其实这种情况下可以把遮挡元素增加一点背景透明度，就不会造成完全覆盖了。
@xiaoxiuaoliang

[paranoiagu]

收了，有用。另外，1 楼说的有道理，水印置于顶层，设置半透明。

[tyx1703]

@paranoiagu 嗯好的。我想一下如何实现

[unizheng]

建议增加一些防护机制，防止水印被简单的关闭、篡改（比如删除 style 属性，修改值等）。

[tyx1703]

@unizheng 现在有的，通过 MutationObserver 监测 background 属性变化

[wly19960911]

background style 加个 !important，防止被 css 优先级覆盖。

[zxq2233]

dispay:none
解决一切

[tyx1703]

@wly19960911 嗯嗯，有道理👍


@zxq2233 哈哈，display:none; 都没有内容了，也就不需要水印了😄

[xibidix]

不错哈

[tyx1703]

@xibidix 😜感谢

[jinzhe]

```js
var canvas = document.createElement("canvas");
canvas.width = 600;
canvas.height = 600;
var ctx = canvas.getContext("2d");
ctx.rotate((-25 * Math.PI) / 180);
ctx.fillStyle = "rgba(100,100,100,.4)";
ctx.textAlign = "center";
ctx.font = "40px Airal";
ctx.fillText("https://zee.kim", 600 / 3, 600 / 2);
// ctx.rotate((20 * Math.PI) / 180); //坐标系还原
console.log(canvas.toDataURL("image/png"));
```

之前做在线打印奖状做过类似效果

[tyx1703]

@jinzhe 嗯，原理差不多。我这个加了画布的大小根据里面内容大小自适应的功能来满足自定义的需求