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

2019-05-07 19:22:27 +08:00
 tyx1703

Github

Demo

介绍

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

原理

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

最后

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

3995 次点击
所在节点    分享创造
13 条回复
xiaoxiuaoliang
2019-05-07 22:18:24 +08:00
提个建议,支持水印置于顶层放置。因为有些场景下水印需要总是显示,不能被元素的背景颜色覆盖。
tyx1703
2019-05-07 23:03:46 +08:00
感谢,不过其实这种情况下可以把遮挡元素增加一点背景透明度,就不会造成完全覆盖了。
@xiaoxiuaoliang
paranoiagu
2019-05-08 07:52:13 +08:00
收了,有用。另外,1 楼说的有道理,水印置于顶层,设置半透明。
tyx1703
2019-05-08 08:38:10 +08:00
@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
不错哈
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 嗯,原理差不多。我这个加了画布的大小根据里面内容大小自适应的功能来满足自定义的需求

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/561939

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX