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