唯品秀前端博客

其实这个需求意义感觉不是很大,因为网页通过控制台是可以人为控制伪造的,但在某些时候可能用的着,例如内部系统网页信息对外截图展示等,佛曰:存在必有价值嘛!下面给大家准备好了实例,只需要复制粘贴改改参数傻瓜式就能完成我们的目标。

插件

原本这个插件只支持一行文本,超出一行才自动换行。但某些时候可能需要2行显示,所以我把源代码稍微改了下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
/* global define */
(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    /*AMD. Register as an anonymous module.
     *define([], factory); */

    define([], factory());
  } else if (typeof module === 'object' && module.exports) {
    /*Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.*/

    module.exports = factory();
  } else {
    /*Browser globals (root is window)*/
    root['watermark'] = factory();
  }
})(this, function() {
  /*Just return a value to define the module export.*/
  var watermark = {};

  var defaultSettings = {
    watermark_id: 'wm_div_id', //水印总体的id
    watermark_prefix: 'mask_div_id', //小水印的id前缀
    watermark_txt: '测试水印', //水印的内容
    watermark_time: '', //时间
    watermark_x: 20, //水印起始位置x轴坐标
    watermark_y: 20, //水印起始位置Y轴坐标
    watermark_rows: 0, //水印行数
    watermark_cols: 0, //水印列数
    watermark_x_space: 50, //水印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上
  };

  /*加载水印*/
  var loadMark = function() {
    /*采用配置项替换默认值,作用类似jquery.extend*/
    if (arguments.length === 1 && typeof arguments[0] === 'object') {
      var src = arguments[0] || {};
      for (var key in src) {
        if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key]) continue;
        /*veronic: resolution of watermark_angle=0 not in force*/ else if (
          src[key] ||
          src[key] === 0
        )
          defaultSettings[key] = src[key];
      }
    }

    /*如果元素存在则移除*/
    var watermark_element = document.getElementById(defaultSettings.watermark_id);
    if (watermark_element) {
      var _parentElement = watermark_element.parentNode;
      if (_parentElement) {
        _parentElement.removeChild(watermark_element);
      }
    }

    /*获取页面最大宽度*/
    var page_width =
      Math.max(document.body.scrollWidth, document.body.clientWidth) -
      defaultSettings.watermark_width / 2;
    /*获取页面最大长度*/
    var page_height =
      Math.max(
        document.body.scrollHeight,
        document.body.clientHeight,
        document.documentElement.clientHeight
      ) -
      defaultSettings.watermark_height / 2;

    var setting = arguments[0] || {};
    var parentEle = defaultSettings.watermark_parent_node;

    var page_offsetTop = 0;
    var page_offsetLeft = 0;
    if (setting.watermark_parent_width || setting.watermark_parent_height) {
      setting.watermark_parent_width
        ? (page_width = setting.watermark_parent_width - defaultSettings.watermark_width / 2)
        : defaultSettings.watermark_parent_node
        ? (page_width = parentEle.offsetWidth - defaultSettings.watermark_width / 2)
        : void 0;
      setting.watermark_parent_height
        ? (page_height = setting.watermark_parent_height - defaultSettings.watermark_height / 2)
        : defaultSettings.watermark_parent_node
        ? (page_height =
            Math.max(parentEle.offsetHeight, parentEle.scrollHeight) -
            defaultSettings.watermark_height / 2)
        : void 0;

      /*指定父元素同时指定了宽或高*/
      if (parentEle) {
        page_offsetTop = parentEle.offsetTop || 0;
        page_offsetLeft = parentEle.offsetLeft || 0;
        defaultSettings.watermark_x = defaultSettings.watermark_x + page_offsetLeft;
        defaultSettings.watermark_y = defaultSettings.watermark_y + page_offsetTop;
      }
    } else {
      if (parentEle) {
        page_offsetTop = parentEle.offsetTop || 0;
        page_offsetLeft = parentEle.offsetLeft || 0;
        page_width = parentEle.offsetWidth - defaultSettings.watermark_width / 2 || 0;
        page_height =
          Math.max(parentEle.offsetHeight, parentEle.scrollHeight) -
            defaultSettings.watermark_height / 2 || 0;

        defaultSettings.watermark_x = defaultSettings.watermark_x + page_offsetLeft;
        defaultSettings.watermark_y = defaultSettings.watermark_y + page_offsetTop;
      }
    }

    /*创建水印外壳div*/
    var otdiv = document.getElementById(defaultSettings.watermark_id);
    var shadowRoot = null;

    if (!otdiv) {
      otdiv = document.createElement('div');

      /*创建shadow dom*/
      otdiv.id = defaultSettings.watermark_id;
      otdiv.style.pointerEvents = 'none';
      otdiv.style.position = 'fixed';
      otdiv.style.left = '0';
      otdiv.style.right = '0';
      otdiv.style.top = '0';
      otdiv.style.bottom = '0';
      otdiv.style.whiteSpace = 'pre';

      /*判断浏览器是否支持attachShadow方法*/
      if (typeof otdiv.attachShadow === 'function') {
        /* createShadowRoot Deprecated. Not for use in new websites. Use attachShadow*/
        shadowRoot = otdiv.attachShadow({ mode: 'open' });
      } else {
        shadowRoot = otdiv;
      }

      /*将shadow dom随机插入body内的任意位置*/
      var nodeList = document.body.children;
      var index = Math.floor(Math.random() * (nodeList.length - 1));
      if (nodeList[index]) {
        document.body.insertBefore(otdiv, nodeList[index]);
      } else {
        document.body.appendChild(otdiv);
      }
    } else if (otdiv.shadowRoot) {
      shadowRoot = otdiv.shadowRoot;
    }

    /*三种情况下会重新计算水印列数和x方向水印间隔:1、水印列数设置为0,2、水印长度大于页面长度,3、水印长度小于于页面长度*/
    var frontWidth =
      defaultSettings.watermark_x +
      page_offsetLeft +
      defaultSettings.watermark_width * defaultSettings.watermark_cols +
      defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1);
    if (
      defaultSettings.watermark_cols == 0 ||
      frontWidth + defaultSettings.watermark_width < page_width ||
      frontWidth > page_width
    ) {
      defaultSettings.watermark_cols = parseInt(
        (page_width - defaultSettings.watermark_x + page_offsetLeft) /
          (defaultSettings.watermark_width + defaultSettings.watermark_x_space / 2)
      );
      var temp_watermark_x_space = parseInt(
        (page_width -
          defaultSettings.watermark_x +
          page_offsetLeft -
          defaultSettings.watermark_width * defaultSettings.watermark_cols) /
          defaultSettings.watermark_cols
      );
      defaultSettings.watermark_x_space = temp_watermark_x_space
        ? defaultSettings.watermark_x_space
        : temp_watermark_x_space;
    }

    /*三种情况下会重新计算水印列数和x方向水印间隔:1、水印列数设置为0,2、水印长度大于页面长度,3、水印长度小于于页面长度*/
    var frontHeight =
      defaultSettings.watermark_y +
      page_offsetTop +
      defaultSettings.watermark_height * defaultSettings.watermark_rows +
      defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1);
    if (
      defaultSettings.watermark_rows == 0 ||
      frontHeight + defaultSettings.watermark_height < page_height ||
      frontHeight > page_height
    ) {
      defaultSettings.watermark_rows = parseInt(
        (page_height - defaultSettings.watermark_y + page_offsetTop) /
          (defaultSettings.watermark_height + defaultSettings.watermark_y_space / 2)
      );
      var temp_watermark_y_space = parseInt(
        (page_width -
          defaultSettings.watermark_x +
          page_offsetLeft -
          defaultSettings.watermark_width * defaultSettings.watermark_cols) /
          defaultSettings.watermark_cols
      );
      defaultSettings.watermark_y_space = temp_watermark_y_space
        ? defaultSettings.watermark_y_space
        : temp_watermark_y_space;
    }

    var x;
    var y;
    for (var i = 0; i < defaultSettings.watermark_rows; i++) {
      y =
        defaultSettings.watermark_y +
        (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
      for (var j = 0; j < defaultSettings.watermark_cols - 1; j++) {
        x =
          defaultSettings.watermark_x +
          (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;

        var mask_div = document.createElement('div');
        //var oText = document.createTextNode(defaultSettings.watermark_txt);
        //var oTime = document.createTextNode(defaultSettings.watermark_time);
        // mask_div.appendChild(oText);
        mask_div.innerHTML = defaultSettings.watermark_txt + '\n' + defaultSettings.watermark_time;
        /*设置水印相关属性start*/
        mask_div.id = defaultSettings.watermark_prefix + i + j;
        /*设置水印div倾斜显示*/
        mask_div.style.webkitTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)';
        mask_div.style.MozTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)';
        mask_div.style.msTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)';
        mask_div.style.OTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)';
        mask_div.style.transform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)';
        mask_div.style.visibility = '';
        mask_div.style.position = 'absolute';
        /*选不中*/
        mask_div.style.left = x + 'px';
        mask_div.style.top = y + 'px';
        mask_div.style.overflow = 'hidden';
        mask_div.style.zIndex = '9999999';
        mask_div.style.opacity = defaultSettings.watermark_alpha;
        mask_div.style.fontSize = defaultSettings.watermark_fontsize;
        mask_div.style.fontFamily = defaultSettings.watermark_font;
        mask_div.style.color = defaultSettings.watermark_color;
        mask_div.style.textAlign = 'center';
        mask_div.style.width = defaultSettings.watermark_width + 'px';
        mask_div.style.height = defaultSettings.watermark_height + 'px';
        mask_div.style.display = 'block';
        mask_div.style['-ms-user-select'] = 'none';
        /*设置水印相关属性end*/
        shadowRoot.appendChild(mask_div);
      }
    }
  };

  /*移除水印*/
  var removeMark = function() {
    /*采用配置项替换默认值,作用类似jquery.extend*/
    if (arguments.length === 1 && typeof arguments[0] === 'object') {
      var src = arguments[0] || {};
      for (var key in src) {
        if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key]) continue;
        /*veronic: resolution of watermark_angle=0 not in force*/ else if (
          src[key] ||
          src[key] === 0
        )
          defaultSettings[key] = src[key];
      }
    }

    /*移除水印*/
    var watermark_element = document.getElementById(defaultSettings.watermark_id);
    var _parentElement = watermark_element.parentNode;
    _parentElement.removeChild(watermark_element);
  };

  /*初始化水印,添加load和resize事件*/
  watermark.init = function(settings) {
    loadMark(settings);
    window.addEventListener('load', function() {
      loadMark(settings);
    });
    window.addEventListener('resize', function() {
      loadMark(settings);
    });
    window.addEventListener('DOMContentLoaded', function() {
      loadMark(settings);
    });
  };

  /*手动加载水印*/
  watermark.load = function(settings) {
    loadMark(settings);
  };

  /*手动移除水印*/
  watermark.remove = function() {
    removeMark();
  };

  return watermark;
});

如何调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var watermark = require('app/common/watermark');
watermark.init({
    watermark_txt: cookie.get('USER_NAME'), //第一行水印的内容
    watermark_time: moment().format('YYYY-MM-DD H:mm:ss'), //第二行水印内容
    watermark_x: 20, //水印起始位置x轴坐标
    watermark_y: 20, //水印起始位置Y轴坐标
    watermark_rows: 0, //水印行数
    watermark_cols: 0, //水印列数
    watermark_x_space: 50, //水印x轴间隔
    watermark_y_space: 50, //水印y轴间隔
    watermark_font: '微软雅黑', //水印字体
    watermark_color: 'gray', //水印字体颜色
    watermark_fontsize: '16px', //水印字体大小
    watermark_alpha: 0.12, //水印透明度,要求设置在大于等于0.005
    watermark_width: 90, //水印宽度
    watermark_height: 50, //水印高度
    watermark_angle: 30 //水印倾斜度数
    //watermark_parent_node: document.getElementById('J_table') //水印插件挂载的父元素element,不输入则默认挂在body上
});

效果图

小结

使用起来超级简单,在此做个笔记,方便以后再次用到时候复制粘贴。

本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(3) 打赏
标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"超简单将网站内容网页添加水印watermark.js优化版"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏