水印 | 乐趣区

插件系列简单水印watermarkdom和算法水印频域方式图片合并实现

插件github地址：https://github.com/saucxs/wat... 有详细的使用步骤，可以参考，不会用请留言，感觉可以，请给个星星。一、简单水印（watermark-dom）阿里巴巴内网的不可见水印用的是什么算法？据说月饼事件截图的那位员工也被开除了？下面的只是简单的加一个很浅的水印，实现起来很容易。 1、看看水印的效果随便找一个网站，比如就找掘金的个人首页，（1）F12检查模式，（2）在console里粘贴下面的代码， (function(watermark){window.watermarkdivs=[];var loadMark=function(settings){var defaultSettings={watermark_txt:"text",watermark_x:20,watermark_y:20,watermark_rows:0,watermark_cols:0,watermark_x_space:50,watermark_y_space:50,watermark_color:'#000000',watermark_alpha:0.005,watermark_fontsize:'18px',watermark_font:'微软雅黑',watermark_width:150,watermark_height:100,watermark_angle:15,watermark_bg_alpha:0.5};if(arguments.length===1&&typeof arguments[0]==="object"){var src=arguments[0]||{};for(key in src){if(src[key]&&defaultSettings[key]&&src[key]===defaultSettings[key])continue;else if(src[key])defaultSettings[key]=src[key]}}var oTemp=document.createDocumentFragment();if(window.watermarkdivs&&window.watermarkdivs.length>0){document.body.removeChild(document.getElementById("otdivid"));window.watermarkdivs=[]}var page_width=Math.max(document.body.scrollWidth,document.body.clientWidth);var page_height=Math.max(document.body.scrollHeight,document.body.clientHeight);var otdiv=document.getElementById("otdivid");if(defaultSettings.watermark_cols==0||(parseInt(defaultSettings.watermark_x+defaultSettings.watermark_width*defaultSettings.watermark_cols+defaultSettings.watermark_x_space*(defaultSettings.watermark_cols-1))>page_width)){defaultSettings.watermark_cols=parseInt((page_width-defaultSettings.watermark_x+defaultSettings.watermark_x_space)/(defaultSettings.watermark_width+defaultSettings.watermark_x_space));defaultSettings.watermark_x_space=parseInt((page_width-defaultSettings.watermark_x-defaultSettings.watermark_width*defaultSettings.watermark_cols)/(defaultSettings.watermark_cols-1))}if(defaultSettings.watermark_rows==0||(parseInt(defaultSettings.watermark_y+defaultSettings.watermark_height*defaultSettings.watermark_rows+defaultSettings.watermark_y_space*(defaultSettings.watermark_rows-1))>page_height)){defaultSettings.watermark_rows=parseInt((defaultSettings.watermark_y_space+page_height-defaultSettings.watermark_y)/(defaultSettings.watermark_height+defaultSettings.watermark_y_space));defaultSettings.watermark_y_space=parseInt(((page_height-defaultSettings.watermark_y)-defaultSettings.watermark_height*defaultSettings.watermark_rows)/(defaultSettings.watermark_rows-1))}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');mask_div.id='mask_div'+i+j;mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));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="9";mask_div.style.pointerEvents="none";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.fontWeight="900";oTemp.appendChild(mask_div)}};document.body.appendChild(oTemp)};watermark.load=function(settings){window.onload=function(){loadMark(settings)};window.onresize=function(){loadMark(settings)}};watermark.load({watermark_txt:"测试水印，saucxs，测试水印，songEagle，工号等"})})(window.watermark={});（3）改变一下页面窗口大小，然后就可以看到我首页出现如下图的水印，一层浅浅的水印它的作用是在当前页面上增加了一个透明度只有0.005的很多的水印。水印内容“测试水印，saucxs，测试水印，songEagle，工号等”。 2、水印的优化当然是需要使用者不知道这个页面有水印，保证一些信息的安全性以及泄露之后可以追踪到是谁在泄露机密信息，他没有发觉到有水印，所以需要将水印调成透明度很低，这样使用者看不到水印，但是一旦使用者截图将图片发布到互联网上，这时候只需要将图片进行一些简单操作就可以让水印重新显现出来。只要使用者不知道有水印存在，这样就是从根本上加了水印，信息的源头上加了水印，确保信息的安全，以及泄露之后的追踪。我们还是拿掘金的个人首页作为试验田。这回我们将水印的透明度调成0.004，水印字体颜色调成页面背景颜色（掘金的是#f4f5f5），然后截图（这回看不出来有水印吧）把图片放到PS，我使用的是ps cs6里面，建一个空白图层在上面，填充为黑色，操作：如图所示背景色选择黑色，然后按shift+f5，选择背景色进行填充。混合模式选择正片叠底这一类的（也就是让亮的更亮，暗的更暗），一个个试。当我试到“实色混合”和“颜色加深”的时候，水印就显示出来了。哇，吓到我了，原来可以这么玩。 3、watermark-dom水印原理分析通过js向html中一次性添加dom元素，所以我取名叫做watermark-dom，如果一旦知道有这个水印插件，使用者是可以手动将当前页面的水印dom删掉，这样也就是开发人员知道怎么弄，对于其他人员还是不知道如何去掉页面水印的。 3.1关键元素1--pointer-events:none这个归功于css的属性，准确的说是css3的一个属性pointer-events，本来这个属性的而设计之初是为了--真正意义上的禁用元素，因为设置值为none的时候，这个元素是使用鼠标或者触摸感知不到的，可以称pointer-events为“元素虚化”。支持浏览器：目前FireFox浏览器，Chrome都支持。Opera以及IE不支持。该属性的缺点： 1、pointer-events:none影响触屏设备的滚动，如无线端页面等； 2、如果子元素设置了pointer-eventes: auto会导致滚动的时候页面闪动 3.2关键元素2--opacity属性为什么这么说opacity属性，因为这个属性是对元素进行透明的设置，因为是水印，希望尽量不影响到正常页面的视觉体验。支持浏览器：所有浏览器都支持 opacity 属性。注意：IE8以及更早的版本支持替代的filter属性。例如：filter:Alpha(opacity=50)。在设置这个透明度的时候，经过测试发现，水印透明度，要求设置在大于等于0.005，因为比这个低的话，使用ps显现的时候效果不明显。如果需要去尽量影藏水印，可以把水印的字体颜色和页面的背景颜色调成一致。如果就要正常显示，尽量设置opactity的时候设置为大于等于0.005，一个性能和显示的平衡点。 4、附上watermark-dom完整代码如果后续更新和优化的时候，源码请看这个watermark-dom里的watermark.js文件 5、一个具体的例子引入这个watermark.js的代码。 html代码 <html> <meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <script type="text/javascript" src="watermark.js"></script> <script type="text/javascript"> watermark.load({ watermark_txt: "测试水印，1021002301，测试水印，SDAHJDBJJdjsfsc" }); </script> <body> <div style="width:300px;height:300px;background-color: red; opacity:0.98;" onclick="alert(1);">test</div> <div style="width:300px;height:300px;background-color: blue; opacity:0.9;" onclick="alert(2);">test</div> <a href="www.test.com"> baidu</a> </body></html>效果如下图： ...

工具系列简单水印watermarkdom和算法水印频域方式图片合并实现

一、简单水印（watermark-dom）阿里巴巴内网的不可见水印用的是什么算法？据说月饼事件截图的那位员工也被开除了？下面的只是简单的加一个很浅的水印，实现起来很容易。 1、看看水印的效果随便找一个网站，比如就找掘金的个人首页，（1）F12检查模式，（2）在console里粘贴下面的代码， (function(watermark){window.watermarkdivs=[];var loadMark=function(settings){var defaultSettings={watermark_txt:"text",watermark_x:20,watermark_y:20,watermark_rows:0,watermark_cols:0,watermark_x_space:50,watermark_y_space:50,watermark_color:'#000000',watermark_alpha:0.005,watermark_fontsize:'18px',watermark_font:'微软雅黑',watermark_width:150,watermark_height:100,watermark_angle:15,watermark_bg_alpha:0.5};if(arguments.length===1&&typeof arguments[0]==="object"){var src=arguments[0]||{};for(key in src){if(src[key]&&defaultSettings[key]&&src[key]===defaultSettings[key])continue;else if(src[key])defaultSettings[key]=src[key]}}var oTemp=document.createDocumentFragment();if(window.watermarkdivs&&window.watermarkdivs.length>0){document.body.removeChild(document.getElementById("otdivid"));window.watermarkdivs=[]}var page_width=Math.max(document.body.scrollWidth,document.body.clientWidth);var page_height=Math.max(document.body.scrollHeight,document.body.clientHeight);var otdiv=document.getElementById("otdivid");if(defaultSettings.watermark_cols==0||(parseInt(defaultSettings.watermark_x+defaultSettings.watermark_width*defaultSettings.watermark_cols+defaultSettings.watermark_x_space*(defaultSettings.watermark_cols-1))>page_width)){defaultSettings.watermark_cols=parseInt((page_width-defaultSettings.watermark_x+defaultSettings.watermark_x_space)/(defaultSettings.watermark_width+defaultSettings.watermark_x_space));defaultSettings.watermark_x_space=parseInt((page_width-defaultSettings.watermark_x-defaultSettings.watermark_width*defaultSettings.watermark_cols)/(defaultSettings.watermark_cols-1))}if(defaultSettings.watermark_rows==0||(parseInt(defaultSettings.watermark_y+defaultSettings.watermark_height*defaultSettings.watermark_rows+defaultSettings.watermark_y_space*(defaultSettings.watermark_rows-1))>page_height)){defaultSettings.watermark_rows=parseInt((defaultSettings.watermark_y_space+page_height-defaultSettings.watermark_y)/(defaultSettings.watermark_height+defaultSettings.watermark_y_space));defaultSettings.watermark_y_space=parseInt(((page_height-defaultSettings.watermark_y)-defaultSettings.watermark_height*defaultSettings.watermark_rows)/(defaultSettings.watermark_rows-1))}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');mask_div.id='mask_div'+i+j;mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));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="9";mask_div.style.pointerEvents="none";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.fontWeight="900";oTemp.appendChild(mask_div)}};document.body.appendChild(oTemp)};watermark.load=function(settings){window.onload=function(){loadMark(settings)};window.onresize=function(){loadMark(settings)}};watermark.load({watermark_txt:"测试水印，saucxs，测试水印，songEagle，工号等"})})(window.watermark={});（3）改变一下页面窗口大小，然后就可以看到我首页出现如下图的水印，一层浅浅的水印它的作用是在当前页面上增加了一个透明度只有0.005的很多的水印。水印内容“测试水印，saucxs，测试水印，songEagle，工号等”。 2、水印的优化当然是需要使用者不知道这个页面有水印，保证一些信息的安全性以及泄露之后可以追踪到是谁在泄露机密信息，他没有发觉到有水印，所以需要将水印调成透明度很低，这样使用者看不到水印，但是一旦使用者截图将图片发布到互联网上，这时候只需要将图片进行一些简单操作就可以让水印重新显现出来。只要使用者不知道有水印存在，这样就是从根本上加了水印，信息的源头上加了水印，确保信息的安全，以及泄露之后的追踪。我们还是拿掘金的个人首页作为试验田。这回我们将水印的透明度调成0.004，水印字体颜色调成页面背景颜色（掘金的是#f4f5f5），然后截图（这回看不出来有水印吧）把图片放到PS，我使用的是ps cs6里面，建一个空白图层在上面，填充为黑色，操作：如图所示背景色选择黑色，然后按shift+f5，选择背景色进行填充。混合模式选择正片叠底这一类的（也就是让亮的更亮，暗的更暗），一个个试。当我试到“实色混合”和“颜色加深”的时候，水印就显示出来了。哇，吓到我了，原来可以这么玩。 3、watermark-dom水印原理分析通过js向html中一次性添加dom元素，所以我取名叫做watermark-dom，如果一旦知道有这个水印插件，使用者是可以手动将当前页面的水印dom删掉，这样也就是开发人员知道怎么弄，对于其他人员还是不知道如何去掉页面水印的。 3.1关键元素1--pointer-events:none这个归功于css的属性，准确的说是css3的一个属性pointer-events，本来这个属性的而设计之初是为了--真正意义上的禁用元素，因为设置值为none的时候，这个元素是使用鼠标或者触摸感知不到的，可以称pointer-events为“元素虚化”。支持浏览器：目前FireFox浏览器，Chrome都支持。Opera以及IE不支持。该属性的缺点： 1、pointer-events:none影响触屏设备的滚动，如无线端页面等； 2、如果子元素设置了pointer-eventes: auto会导致滚动的时候页面闪动 3.2关键元素2--opacity属性为什么这么说opacity属性，因为这个属性是对元素进行透明的设置，因为是水印，希望尽量不影响到正常页面的视觉体验。支持浏览器：所有浏览器都支持 opacity 属性。注意：IE8以及更早的版本支持替代的filter属性。例如：filter:Alpha(opacity=50)。在设置这个透明度的时候，经过测试发现，水印透明度，要求设置在大于等于0.005，因为比这个低的话，使用ps显现的时候效果不明显。如果需要去尽量影藏水印，可以把水印的字体颜色和页面的背景颜色调成一致。如果就要正常显示，尽量设置opactity的时候设置为大于等于0.005，一个性能和显示的平衡点。 4、附上watermark-dom完整代码如果后续更新和优化的时候，源码请看这个watermark-dom里的watermark.js文件 5、一个具体的例子引入这个watermark.js的代码。 html代码 <html> <meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <script type="text/javascript" src="watermark.js"></script> <script type="text/javascript"> watermark.load({ watermark_txt: "测试水印，1021002301，测试水印，SDAHJDBJJdjsfsc" }); </script> <body> <div style="width:300px;height:300px;background-color: red; opacity:0.98;" onclick="alert(1);">test</div> <div style="width:300px;height:300px;background-color: blue; opacity:0.9;" onclick="alert(2);">test</div> <a href="www.test.com"> baidu</a> </body></html>效果如下图： ...

网页水印SDK的实现

在网站浏览中，常常需要网页水印，以便防止用户截图或录屏暴露敏感信息后，追踪用户来源。如我们常用的钉钉软件，聊天背景就会有你的名字。那么如何实现网页水印效果呢？网页水印SDK，实现思路1.能更具获取到的当前用户信息，如名字，昵称，ID等，生成水印2.生成一个Canvas，覆盖整个窗口，并且不影响其他元素3.可以修改字体间距，大小，颜色4.不依赖Jquery5.需要防止用户手动删除这个Canvas实现分析初始参数 size: 字体大小 color: 字体颜色 id: canvasId text: 文本内容 density: 间距 clarity: 清晰度 supportTip: Canvas不支持的文字提示生成Canvas根据id生成Canvas，画布大小为window.screen大小，若存在原有老的Canvas，清除并重新生成。画布固定定位在可视窗口，z-index为-1 let body = document.getElementsByTagName(‘body’); let canvas = document.createElement(‘canvas’); canvas.style.cssText= ‘position: fixed;width: 100%;height: 100%;left:0;top:0;z-index: -1;’; body[0].appendChild(canvas);指纹生成算法 let canvas = document.getElementById(this.params.id); let cxt = canvas.getContext(‘2d’); let times = window.screen.width * this.params.clarity / this.params.density;//横向文字填充次数 let heightTimes = window.screen.height * this.params.clarity * 1.5/ this.params.density; //纵向文字填充次数 cxt.rotate(-15Math.PI/180); //倾斜画布 for(let i = 0; i < times; i++) { for(let j = 0; j < heightTimes; j++) { cxt.fillStyle = this.params.color; cxt.font = this.params.size + ’ Arial’; cxt.fillText(this.params.text, this.params.densityi, j*this.params.density); } }防止用户删除使用定时器，定时检查指纹是否存在 let self = this; window.setInterval(function(){ if (!document.getElementById(self.params.id)) { self._init(); } }, 1000);项目编译使用glup编译 var gulp = require(‘gulp’), uglify = require(“gulp-uglify”), babel = require(“gulp-babel”); gulp.task(‘minify’, function () { return gulp.src(’./src/index.js’) // 要压缩的js文件 .pipe(babel()) .pipe(uglify()) .pipe(gulp.dest(’./dist’)); //压缩后的路径 });指纹效果效果地址https://tianshengjie.cn/apps/…项目地址Github: https://github.com/Jay-tian/w...Npm包: https://www.npmjs.com/package… ...

如何用vue封装一个防用户删除的平铺页面的水印组件

需求为了防止截图等安全问题，在web项目页面中生成一个平铺全屏的水印要求水印内容为用户名，水印节点用户不能通过开发者工具等删除效果如上图在body节点下插入水印DOM节点，水印节点覆盖在页面最上层但不影响页面正常操作在通过js或者用户通过开发者工具删除或修改水印节点时自动复原原理通过canvas画出节点需生成水印的文字生成base64图片生成该水印背景图的div节点插入到body下，通过jsMutationObserver方法监听节点变化，再自动重新生成生成水印DOM节点// 生成水印DOM节点 init () { let canvas = document.createElement(‘canvas’) canvas.id = ‘canvas’ canvas.width = ‘200’ // 单个水印的宽高 canvas.height = ‘130’ this.maskDiv = document.createElement(‘div’) let ctx = canvas.getContext(‘2d’) ctx.font = ’normal 18px Microsoft Yahei’ // 设置样式 ctx.fillStyle = ‘rgba(112, 113, 114, 0.1)’ // 水印字体颜色 ctx.rotate(30 * Math.PI / 180) // 水印偏转角度 ctx.fillText(this.inputText, 30, 20) let src = canvas.toDataURL(‘image/png’) this.maskDiv.style.position = ‘fixed’ this.maskDiv.style.zIndex = ‘9999’ this.maskDiv.id = ‘_waterMark’ this.maskDiv.style.top = ‘30px’ this.maskDiv.style.left = ‘0’ this.maskDiv.style.height = ‘100%’ this.maskDiv.style.width = ‘100%’ this.maskDiv.style.pointerEvents = ’none’ this.maskDiv.style.backgroundImage = ‘URL(’ + src + ‘)’ // 水印节点插到body下 document.body.appendChild(this.maskDiv) },监听DOM更改// 监听更改，更改后执行callback回调函数，会得到一个相关信息的参数对象 Monitor () { let body = document.getElementsByTagName(‘body’)[0] let options = { childList: true, attributes: true, characterData: true, subtree: true, attributeOldValue: true, characterDataOldValue: true } let observer = new MutationObserver(this.callback) observer.observe(body, options) // 监听body节点 },使用直接引入项目任何组件中使用即可组件prop接收三个参数 props: { // 显示的水印文本 inputText: { type: String, default: ‘waterMark水印’ }, // 是否允许通过js或开发者工具等途径修改水印DOM节点（水印的id，attribute属性，节点的删除） // true为允许，默认不允许 inputAllowDele: { type: Boolean, default: false }, // 是否在组件销毁时去除水印节点（前提是允许用户修改DOM，否则去除后会再次自动生成） // true会，默认不会 inputDestroy: { type: Boolean, default: false } }inputText（String）：需要生成的水印文本，默认为’waterMark水印’inputAllowDele（Boolean）：是否需要允许用户删除水印DOM节点，true为允许，默认不允许inputDestroy（Boolean）：是否在组件销毁时去除水印节点，true会，默认不会，（只有在inputAllowDele为ftrue时才能生效）如果需要修改水印大小，文字，颜色等样式，可直接进入组件中按注释修改小结工作写了个相关组件，复用率挺高就封装了下，没有经过严格测试，可当做参考使用有需要的朋友欢迎下载源码使用相关GitHub代码 ...