给你的web页面添加盲水印，附带检盲水印方案

应用场景

在一些敏感系统有的时候我们为了防止别人截图或追溯图片源头是谁发的。我们需要在页面上埋下我们的隐形水印。

开始做

埋水印

github上有很多水印的js插件，download下来一个改一改，源码见最后附录。
改动内容：增加了判断dom被人为修改的检测机制，优化了dom渲染机制。增加透明水印
引入WaterMark js模块，
初始化waterMark.init(0) // 0: 默认出现显性水印和隐形水印。 1 只要隐性水印初始化waterMark.init(0) // 0: 默认出现显性水印和隐形水印。 1 只要隐性水印
效果如图：

检水印工具

这里需要用到css3的mix-blend-mode: color-burn;（颜色混合模式：颜色加深）
参照张鑫旭的混合模式的文档

做一个前端选择图片展示的功能（我这里直接用了element-ui的控件）
选择图片转换成base64填充一个img标签，然后同级放一个div标签蒙层
写上样式

.imgshadow {width: 100%;height: 100%;max-width: 820px;background: #000;mix-blend-mode: color-burn;  //色彩混合模式position: absolute;top: 0;left: 0;
}

4.看看效果

(PS: 如果你的页面不是白底的，需要自己计算一下对应的文本的颜色)
附录源码：


//mode  0: 默认出现显性水印和隐形水印。 1 只要隐性水印
var init = function(mode){var n = document.cookie.match('(^|;)?loginName=([^;]*)(;|$)')||document.cookie.match('(^|;)?username=([^;]*)(;|$)');var gOaName = n?n[2]:'devTest';var wmTop = window.top;var div  = document.createElement('div')div.id = "idmast"document.body.appendChild(div)var total = [];var onresize = false;!function(host){if(host.WMJS || wmTop.WMJS) return;host.WMJS = function () {var isIE9 = document.all && document.addEventListener && !window.atob;var front_rows0,front_cols0,front_rows1,front_cols1,front_x=0,   //x轴间距front_y=0,    //Y轴间距original_front_rows=0,original_front_cols=0,// original_front_x_space=120, //x轴密度// original_front_y_space=100, //Y轴密度original_front_x_space=100, //x轴密度original_front_y_space=80, //Y轴密度mask_txt= gOaName,  //水印字---------rtxcolor='#2e3035',   //字体颜色front_txt_alpha=0.1, //字体透明度 0~1font_size='18px',      //字体大小front_font='Helvetica Neue',  //字体width=60,  //宽间距height=50, //高间距angle=35 //字体倾斜度;function remove_old_watermask_0(){for (var i = 0; i <= front_rows0; i++) {for (var j = 0; j <= front_cols0; j++) {var rmElm=document.getElementById('mask_0_elem'+i+j);if(rmElm){rmElm.parentNode.removeChild(rmElm);// console.log('rm'+rmElm);}}}}function remove_old_watermask_1(){for (var i = 0; i <= front_rows1; i++) {for (var j = 0; j <= front_cols1; j++) {var rmElm=document.getElementById('mask_1_elem'+i+j);if(rmElm){rmElm.parentNode.removeChild(rmElm);// console.log('rm'+rmElm);}}}}function getRotation(deg) {var deg2rad = Math.PI * 2 / 360;var rad = deg * deg2rad;var costheta = Math.cos(rad);var sintheta = Math.sin(rad);var M11 = costheta;var M12 = -sintheta;var M21 = sintheta;var M22 = costheta;return [M11,M12,M21,M22];}return {watermark: function (type) { eval('remove_old_watermask_'+type+'()')var oTemp = document.createDocumentFragment();if(type == 1){oTemp = div}var front_x_space=original_front_x_space;var front_y_space=original_front_y_space;var front_cols, front_rowsfront_rows=original_front_rows;front_cols=original_front_cols;if(type == 1){front_x_space = 60;front_y_space = 40;width = 40;height= 20;front_txt_alpha = 0.005font_size = '14px'}else{front_x_space = 100;front_y_space = 80;front_txt_alpha = 0.1;width = 60;height= 50;font_size = '18px'              }var max_width=window.innerWidth- 45;var max_height= window.innerHeight-45;if(front_cols==0||(parseInt(front_x+width*front_cols+front_x_space*(front_cols-1))> max_width)){front_cols=parseInt((front_x_space+max_width - front_x)/(width+front_x_space));front_x_space=parseInt(((max_width - front_x)-width*front_cols)/(front_cols-1));if(!front_x_space){front_x_space=0;}}if(front_rows==0||(parseInt(front_y+height*front_rows+front_y_space*(front_rows-1))> max_height)){front_rows  =parseInt((front_y_space+max_height - front_y)/(height+front_y_space));front_y_space=parseInt(((max_height - front_y)-height*front_rows)/(front_rows-1));if(!front_y_space){front_y_space=0;}}if(type == 1){front_rows1 = front_rowsfront_cols1 = front_cols}else{front_rows0 = front_rowsfront_cols0 = front_cols}var mask_elem=document.createElement('div');var M=getRotation(-angle);mask_elem.id='mask_elem00';mask_elem.className = 'isecui-mask-'+typemask_elem.appendChild(document.createTextNode(mask_txt));mask_elem.style.webkitTransform = "rotate(-"+angle+"deg)";mask_elem.style.MozTransform = "rotate(-"+angle+"deg)";mask_elem.style.msTransform = "rotate(-"+angle+"deg)";mask_elem.style.OTransform = "rotate(-"+angle+"deg)";mask_elem.style.transform = "rotate(-"+angle+"deg)";mask_elem.style.visibility="";mask_elem.style.position="fixed";mask_elem.style.pointerEvents="none";// 鼠标穿透，这个避免按钮被遮盖点不了mask_elem.style.left=front_x+'px';mask_elem.style.top=front_y+'px';mask_elem.style.overflow="hidden";//mask_elem.style.border="solid #eee 1px";mask_elem.style.opacity=front_txt_alpha;if(isIE9){mask_elem.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+front_txt_alpha*100+")";}else{mask_elem.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+front_txt_alpha*100+") progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11="+M[0]+", M12="+M[1]+", M21="+M[2]+", M22="+M[3]+")";}mask_elem.style.fontSize=font_size;mask_elem.style.fontFamily=front_font;mask_elem.style.color=color;mask_elem.style.textAlign="center";//mask_elem.style.width=width+'px';//mask_elem.style.height=height+'px';mask_elem.style.display="block";oTemp.appendChild(mask_elem);var x;var y;for (var i = 0; i < front_rows; i++) {y=front_y+(front_y_space+height)*i;for (var j = 0; j < front_cols; j++) {x=front_x+(width+front_x_space)*j;if(i!=0 || j!=0){//clonevar new_elem=mask_elem.cloneNode(true);new_elem.id='mask_'+type+'_elem'+i+j;new_elem.style.left=x+'px';new_elem.style.top=y+'px';oTemp.appendChild(new_elem);}};};document.body.appendChild(oTemp);total[type] = eval('front_rows'+type+'*front_cols'+type)setTimeout(function(){onresize = false})}};}();var __w_f = function(){var f = host.WMJS.watermark;if(!__w_f.__w_t){f(1);if(!mode){f(0);} __w_f.__w_t = setTimeout(function(){__w_f.__w_t = null;},500);}};host.onresize = function(){__w_f('onresize');onresize = trueconsole.log('watermak resize1');};host.onload = function(){__w_f('onload');console.log('watermak onload');};var waterMarkTimer = setInterval(function(){var mask0 = document.getElementsByClassName('isecui-mask-0').length;var mask1 = document.getElementsByClassName('isecui-mask-1').length;var hide = document.querySelector('.__web-inspector-hide-shortcut__')if(hide){window.location.reload()}if(((total[0]&&total[0]>mask0)||(total[1]&&total[1]>mask1))&&!onresize){window.location.reload()}},1000)}(window);
}export default {init,name :'WaterMark'
}

给你的web页面添加盲水印，附带检盲水印方案相关推荐

如何给web页面添加一个水印
微信搜一搜 "胖蔡话前端" 前端公众号,关注更多前端咨询.欢迎访问个人博客[EnjoyToday.cn)(http://www.enjoytoday.cn) 水印原理我们经常看到 ...
一键将Web页面保存至Anki
title: 一键将Web页面保存至Anki date: 2022-12-02 21:38 tags: [Anki,Anki-Connect,油猴] 文章目录一.前言二.步骤 2.1 通过调用An ...
jpane1_IDEA插件开发，Jpane中集成Web页面
最近,项目组想开发一款插件,其中的功能就有面板中集成本地的Web页面,网上对这种的需求的方案也有很多种,像JEditorPane,DJNativeSwing,还有jdk自带的JavaFX的WebVie ...
前端页面添加全局水印或指定页面添加水印
前言为了防止信息泄露或知识产权被侵犯,在web的世界里,对于图片文档等增加水印处理是十分有必要的.水印的添加根据环境可以分为两大类,前端浏览器环境添加和后端服务环境添加. 今天介绍的就是通过canv ...
ASP.NET Web页面(.aspx)添加用户控件(.ascx)无显示的问题
写好的用户控件点击视图显示没有问题,但是将控件添加到Web窗体上时却显示如下图标: F5运行,查看源代码:有代码--但是页面却显示一片空白. 分析代码,比较了一下能显示用户控件的其他web页面以及代码 ...
html右键禁用和web页面中添加加入qq群的方式
需求: html禁用右键,防止定位csspath和xpath,同时需要在web页面中加入添加加入qq群的图标实现: html禁用右键:利用oncontextmenu <!doctype htm ...
zabbix添加对web页面url的状态监控
zabbix3.0.4添加对web页面url的状态监控 1.应用集配置在配置->主机中打开主机列表,选择需要添加监控主机的web,创建应用集 2.web监测配置选择web场景,再单击右上角 ...
计算机页面添加文字水印在哪,怎么添加水印-Word小技巧-快速添加高大上的水印...
不知道各位小伙伴是否见过这样的文档,带有类似[内部文件]/[严禁外泄]水印的文档,是不是觉得很高大上,神圣而不可侵犯的感觉油然而生?只需要一分钟,小编教你如何为文档快速添加水印. 一.添加水印切换到 ...
html页面怎么加水印,Web 页面如何添加水印？
1. 代码开发版实现方法常规代码实现思路是: 1)web 页面加载后,通过 javascript 创建页面元素 div,并在 div 元素中创建文本节点,展示水印内容 2)设置 div 元素样式,将 ...

给你的web页面添加盲水印，附带检盲水印方案

应用场景

开始做

埋水印

检水印工具

给你的web页面添加盲水印，附带检盲水印方案相关推荐

最新文章

热门文章