为实现前端隐水印效果，做了两套方法的调研和实现：canvas绘制图片、纯文本追加dom。
1、 canvas绘制图片
使用canvas绘制一张设置了透明度的文字的图片，然后在需要设置水印的页面把水印图片设置容器背景图平铺即可
2、 纯文本追加dom
动态生成一定数量的dom元素，设置其文本内容，然后设置透明度即可
水印解密方法
使用了水印之后，可以把截图的图片，放在PhotoShop里面，添加黑色蒙层，设置混合选项->实色混合，水印即可显示出来
小程序端效果对比
1、 使用"纯文本追加dom"的水印
image.png
（小程序首页截图）
image.png
从开始执行封装函数，到完成dom元素的计算执行耗时10ms，速度较快
2、 使用"canvas绘制图片"的水印
image.png
（小程序首页截图）
image.png
Canvas把水印绘制成一张图片，耗时38ms，只用绘制一次
以上两种方案，都已封装成组件，可以直接调用，设置一些简单参数即可。
3、两种绘制方式优缺点对比
image.png
最后总结
➢ 如果只是少量页面需要绘制水印，可采用文本水印，生成的页面节点少，性能更优。
➢ 如果页面比较大，需要大量位置添加水印，则建议采用canvas方式绘制，仅绘制一次，背景平铺即可。另外，绘制的图片可以缓存到本地，其他页面可直接使用，也加快渲染速率。
网友评论