前端页面填加水印方案及实现

骑猪看日落 2022-11-16 04:59 357阅读 0赞

### 文章目录 ###

*  一、背景
 *  二、实现
 *   *  1.利用canvas绘制水印信息
     *  2.页面展示水印
 *  三、完整代码
 *  四、调用
 *  五、验证
 *  六、优化

# 一、背景 #

最近有个项目需要在页面上加上水印。这里尝试了一个实现方案。

# 二、实现 #

## 1.利用canvas绘制水印信息 ##

var can = document.createElement('canvas');
        can.width = 250;
        can.height = 150;
        var cans = can.getContext('2d');
        cans.rotate(-20 * Math.PI / 180);
        cans.font = '17px Vedana';
        // ziti yanse
        cans.fillStyle = 'rgba(200, 200, 200, 0.30)';
        cans.textAlign = 'left';
        cans.textBaseline = 'Middle';
        cans.fillText("水印数据", xIndex , yIndex); //绘制水印文案
    }

## 2.页面展示水印 ##

*  将图片转为dataURL(base64)

canvas.toDataURL('image/png')

*  创建一个div用于展示

var div = document.createElement('div');
    div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';

left top repeat属性表示背景图像将从left,top开始向垂直和水平方向重复。

# 三、完整代码 #

# 四、调用 #

*  将代码写到watermark.js文件里，
 *  再引入
 *  调用

watermark.set("水印信息1","我是水印信息2",...);

支持多个参数，传多个参数时，将分行展示。  
![在这里插入图片描述][20210406153107984.png]

当然，该方法也可以直接写在页面js里面。

注意：  
执行添加水印的操作尽量往后放，反正`</body>`标签之前就行，  
防止DOM还没加载完的情况出现。

# 五、验证 #

打开一个页面，控制台执行代码

1.  在window上添加绘制水印的方法
2.  执行添加水印

效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70]

# 六、优化 #

利用setInterval检测水印状态，对性能不是很友好

// 检测如果水印被去掉了，自动给加上
        setInterval(function(){
            if (document.getElementById(id) === null) {
                id = setWatermark(args);
            }
        }, 500)

可以利用MutationObserver监听DOM变化：

[本文链接https://blog.csdn.net/qq\_39903567/article/details/115459654][https_blog.csdn.net_qq_39903567_article_details_115459654]

[20210406153107984.png]: /images/20221022/84125579960d4170bf3c99108338665f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70]: /images/20221022/22ad872bf6c743d9a45f1cc8e6d9546e.png
[https_blog.csdn.net_qq_39903567_article_details_115459654]: https://blog.csdn.net/qq_39903567/article/details/115459654