前端加载水印？（局部 or 全局）

本文链接：https://blog.csdn.net/qq_43531694/article/details/103974658

前端加载水印？（局部 or 全局）整理

全局水印：

watermark.js是一个给B/S网站系统加水印的插件，确保系统保密性，安全性，降低数据泄密风险。简单易上手，支持多属性配置，支持本地和npm包引入，支持commonjs和es6引入。全局API有init()，load()，remove()方法。使用的是css3的pointer-events事件穿透属性和opacity透明属性，Shadow DOM(影子DOM)结构进行水印内容封装，随机插入到body下

2、水印插件-使用

2.1 本地引入封装的js文件

只是简单的加一个很浅的水印，实现起来很容易。不需要引入jquery插件。

watermark.js是必须要引进的组件

第1步：clone后，在需要加水印的相关页面引入水印文件"watermark.js":

script type="text/javascript" src="./watermark.js"></script>

第2步：在确保页面DOM加载完毕之后，调用watermark的load方法(手动加载):

   <script>watermark.load({ watermark_txt: "测试水印，1021002301，测试水印，100101010111101" })</script>

注意：我们提供了init方法，用来初始化水印，添加load和resize事件

   <script>watermark.init({ watermark_txt: "测试水印，1021002301，测试水印，100101010111101" })</script>

使用插件的效果地址1：http://www.chengxinsong.cn

2.2 npm包引入

第一步：npm获取水印组件包：

npm install watermark-dom

第二步：引入水印模块：

import watermark from 'watermark-dom'
或者
var watermarkDom = require("watermark-dom")

第三步：在确保页面DOM加载完毕之后，调用watermark的load方法(手动加载):

   <script>watermark.load({ watermark_txt: "测试水印，1021002301，测试水印，100101010111101" })</script>

注意：(1)我们提供了init方法，用来初始化水印，添加load和resize事件

   <script>watermark.init({ watermark_txt: "测试水印，1021002301，测试水印，100101010111101" })</script>

注意：(2)我们提供了remove方法，用来移除水印

   <script>watermark.remove({ watermark_txt: "测试水印，1021002301，测试水印，100101010111101" })</script>

3、水印插件-testTool（测试工具）

查看地址：https://www.mwcxs.top/static/testTool/index.html

4、内置方法

4.1 watermark.init(setting);

初始化水印，添加load和resize事件

例子

watermark.init({ watermark_txt: "测试水印，1021002301，测试水印，100101010111101" });

4.2 watermark.load(setting);

手动加载水印

例子

watermark.load({ watermark_txt: "测试水印，1021002301，测试水印，100101010111101" });

4.3 watermark.remove();

手动移除水印

例子

watermark.remove();

5、支持各种属性配置使用

watermark_id: 'wm_div_id',          //水印总体的id
watermark_prefix: 'mask_div_id',    //小水印的id前缀
watermark_txt:"测试水印",             //水印的内容
watermark_x:20,                     //水印起始位置x轴坐标
watermark_y:20,                     //水印起始位置Y轴坐标
watermark_rows:0,                   //水印行数
watermark_cols:0,                   //水印列数
watermark_x_space:100,              //水印x轴间隔
watermark_y_space:50,               //水印y轴间隔
watermark_font:'微软雅黑',           //水印字体
watermark_color:'black',            //水印字体颜色
watermark_fontsize:'18px',          //水印字体大小
watermark_alpha:0.15,               //水印透明度，要求设置在大于等于0.005
watermark_width:100,                //水印宽度
watermark_height:100,               //水印长度
watermark_angle:15,                 //水印倾斜度数
watermark_parent_width:0,      //水印的总体宽度（默认值：body的scrollWidth和clientWidth的较大值）
watermark_parent_height:0,     //水印的总体高度（默认值：body的scrollHeight和clientHeight的较大值）
watermark_parent_node:null     //水印插件挂载的父元素element,不输入则默认挂在body上

上面的属性都支持配置的，怎么使用呢？

基本山需要自己配置的属性：watermark_txt,watermark_color,watermark_fontsize,watermark_alpha,watermark_angle，watermark_width,watermark_height这7个属性一般是经常用到的，其他属性一般用的偏少。需要用到的就设置一下，不需要用到的就可以不设置，插件内部会有默认值的。

比如load方法的属性配置

 watermark.load({ 
    watermark_txt:"测试水印，saucxs，测试水印，songEagle，工号等",  //水印的内容
    watermark_color:'#5579ee',            //水印字体颜色
    watermark_fontsize:'24px',          //水印字体大小
    watermark_alpha:0.5,               //水印透明度，要求设置在大于等于0.005
    watermark_angle:135,                 //水印倾斜度数
    watermark_width:200,                //水印宽度
    watermark_height:200,               //水印长度
});

所以一般先在watermark-dom的测试工具上，把需要配置的属性值，调试好之后在写入代码中，这样效率更高。

7、支持浏览器

Chrome,FireFox,Safari,IE9及以上浏览器

👉 API 详细请点击

局部水印？

在vue项目中，想要在某一模块加载水印。最简便的结合 canvas + vue指令

import Vue from 'vue'
 
// vue 全局指令 --- 模块/组件式添加水印
Vue.directive('watermark',(el,binding)=>{
    function addWaterMarker(str,parentNode,font,textColor){// 水印文字，父元素，字体，文字颜色
        var can = document.createElement('canvas');
        parentNode.appendChild(can);
        can.width = 150;
        can.height = 100;
        can.style.display = 'none';
        var cans = can.getContext('2d');
        cans.rotate(-20 * Math.PI / 180);
        cans.font = font || "13px Microsoft JhengHei";
        cans.fillStyle = textColor || "rgba(180, 180, 180, 0.2)";
        cans.textAlign = 'left';
        cans.textBaseline = 'Middle';
        cans.fillText(str, can.width / 14, can.height);
        parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
    }
    addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)
})


// 调用
// v-watermark="{text: '文本', textColor:'red'}"