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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2025 天前的主题，其中的信息可能已经有所发展或是发生改变。

Github

Demo

介绍

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

原理

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

最后

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

canvas

水印

设置

字体

13 条回复 • 2019-05-09 14:56:07 +08:00

xiaoxiuaoliang

2019-05-07 22:18:24 +08:00 via Android

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

tyx1703

2019-05-07 23:03:46 +08:00

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

paranoiagu

2019-05-08 07:52:13 +08:00 via Android

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

tyx1703

2019-05-08 08:38:10 +08:00 via iPhone

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

unizheng

2019-05-08 10:16:46 +08:00

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

tyx1703

2019-05-08 10:52:51 +08:00

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

wly19960911

2019-05-08 13:56:57 +08:00

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

zxq2233

2019-05-08 14:01:45 +08:00

dispay:none
解决一切

tyx1703

2019-05-08 15:26:37 +08:00

@wly19960911 嗯嗯，有道理👍

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

xibidix

2019-05-09 10:03:42 +08:00 via iPhone

不错哈

tyx1703

2019-05-09 11:14:18 +08:00

@xibidix 😜感谢

jinzhe

2019-05-09 14:23:22 +08:00

```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

2019-05-09 14:56:07 +08:00

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