唯品秀前端博客
当前位置: 前端开发 > JavaScript > 超简单将网站内容网页添加水印效果

超简单将网站内容网页添加水印效果

2019-10-13 分类:JavaScript 作者:管理员 阅读(62)

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

插件

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
/* 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_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';

            /*判断浏览器是否支持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; 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);
                mask_div.appendChild(oText);
                /*设置水印相关属性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
var watermark = require('app/common/watermark');
watermark.init({
    watermark_txt:'我是水印内容', //水印的内容
    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: 100, //水印宽度
    watermark_height: 50, //水印高度
    watermark_angle: 30 //水印倾斜度数
    //watermark_parent_node: document.getElementById('J_table') //水印插件挂载的父元素element,不输入则默认挂在body上
});

小结

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

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
0

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - 超简单将网站内容网页添加水印效果

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与,主题源码 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 238 篇
  • 草稿数目: 0 篇
  • 分类数目: 15 个
  • 独立页面: 6 个
  • 评论总数: 863 条
  • 链接总数: 14 个
  • 标签总数: 429 个
  • 建站时间: 1041 天
  • 注册用户: 2886 人
  • 访问总量: 8669070 次
  • 最近更新: 2019年10月21日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线