hs-watermark v1.0.16
参考来源:https://github.com/saucxs/watermark-dom
特性:
- 多属性配置,简单易上手
- 动态计算水印
- 水印防被删(监听水印组件元素删除并重新添加,监听改变水印的属性并重新添加)
- 支持2种导入使用:本地引用,npm引用
- 水印测试工具:testTool工具
- 内置3种全局API方法:init(),load(), remove()。
- 原理:pointer-events事件穿透属性,Shadow DOM(影子DOM),opacity等
1、水印插件-使用
1.1 本地引入封装的js文件
只是简单的加一个很浅的水印,实现起来很容易。不需要引入jquery插件。
watermark.js
是必须要引进的组件
第一步:获取组件方式:git clone http://git.hschefu.com/koujiao/hs-watermark.git
第二步:clone后,在需要加水印的相关页面引入水印文件"watermark.js":
<script type="text/javascript" src="./src/watermark.js"></script>
第三步:在确保页面DOM加载完毕之后,调用watermark的load方法(手动加载):
<script>watermark.load({ watermark_txt: "测试水印,1021002301,测试水印,100101010111101" })</script>
注意:我们提供了init方法,用来初始化水印,添加load和resize事件
<script>watermark.init({ watermark_txt: "测试水印,1021002301,测试水印,100101010111101" })</script>
1.2 npm包引入
第一步:npm获取水印组件包:
npm install hs-watermark
第二步:引入水印模块:
import watermark from 'hs-watermark'
或者
var watermarkDom = require("hs-watermark")
第三步:在确保页面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>
2、内置方法
2.1 watermark.init(setting);
初始化水印,添加load和resize事件
例子
watermark.init({ watermark_txt: "测试水印,1021002301,测试水印,100101010111101" });
2.2 watermark.load(setting);
手动加载水印
例子
watermark.load({ watermark_txt: "测试水印,1021002301,测试水印,100101010111101" });
2.3 watermark.remove();
手动移除水印
例子
watermark.remove();
3、支持各种属性配置使用
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_fontweight:'800', //水印字重
watermark_alpha:0.15, //水印透明度,要求设置在大于等于0.005
watermark_width:100, //水印宽度
watermark_height:100, //水印长度
watermark_calc_width:false, //是否根据字体内容自动计算宽度
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的测试工具上,把需要配置的属性值,调试好之后在写入代码中,这样效率更高。
4、API介绍
格式:请求类型:URL地址
例如:
get:/api/watermark //获取水印参数
post:/api/watermark //发布水印参数
put:/api/watermark //更新水印参数
delete:/api/watermark //删除水印参数
PS:如果没有添加请求类型的话,默认为get请求。
返回结果定义:
返回结果根据不同的状态需要定义,返回结果<<<
标识,例如:
<<<
success
{
"errNum":0,
"retMsg":"success",
"retData":{
"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_fontweight":'800', //水印字重
"watermark_alpha":0.15,//水印透明度,要求设置在大于等于0.003
"watermark_width":150,//水印宽度
"watermark_height":100,//水印长度
"watermark_angle":15,//水印倾斜度数
}
}
<<<
error
{
"errNum":0,
"retMsg":"success",
"retData":[]
}
5、支持浏览器
Chrome,FireFox,Safari,IE9及以上浏览器