前端实现隐水印方案

为实现前端隐水印效果，做了两套方法的调研和实现：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方式绘制，仅绘制一次，背景平铺即可。另外，绘制的图片可以缓存到本地，其他页面可直接使用，也加快渲染速率。