Watermark

插件系列简单水印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>效果如下图： ...

npm系列手把手教你用npm发布第一个npm包的详细教程

我们已经实现了路由的自动化构建，但是我们可以看到，一大串代码怼在里面。当然你也可以说，把它封装在一个JS文件里面，然后使用 require('./autoRoute.js') 给引入进来，那也行。但是，为什么不把心放大一点呢？比如说，我们把它做成一个npm包！最初自己做的时候就是这种直接引入封装的JS文件里，可以参考： https://github.com/saucxs/wat... 一、准备工作1、将npm包的镜像换成 https://www.npmjs.com/ npm config set registry https://www.npmjs.com/因为这个官方npm加载速度慢，之后再切换回来 npm config set registry https://registry.npm.taobao.org 2、自己电脑不是adminstrator权限，请切换到administrator用户。这个不需要告诉你怎么切换用户吧 3、注册一个npm账号注册地址：https://www.npmjs.com/ 二、初始化要封装的包1、择一个文件夹，然后用命令行 cd进去 npm init接下来就是一长串表单： 1、name：填写你这个包的名字，默认是你这个文件夹的名字。不过这里要着重说一下，最好先去npm上找一下有没有同名的包。最好的测试方式就是，在命令行里面输入npm install 你要取的名字，如果报错，那么很好，npm上没有跟你同名的包，你可以放心大胆地把包发布出去。如果成功下载下来了。。。那么很不幸，改名字吧。。。 2、version：你这个包的版本，默认是1.0.0 3、description：这个用一句话描述你的包是干嘛用的，比如我就直接：‘watermark for dom 4、entry point：入口文件，默认是Index.js，你也可以自己填写你自己的文件名 5、test command：测试命令，这个直接回车就好了，因为目前还不需要这个。 6、git repository：这个是git仓库地址，如果你的包是先放到github上或者其他git仓库里，这时候你的文件夹里面会存在一个隐藏的.git目录，npm会读到这个目录作为这一项的默认值。如果没有的话，直接回车继续。 7、keyword：这个是一个重点，这个关系到有多少人会搜到你的npm包。尽量使用贴切的关键字作为这个包的索引。我这个包嘛，第一是在express下工作的，然后又是一个插件plugin，然后又是一个注册路由route用的，而这个路由又是基于文件目录dir，所以很好就得出我的包的索引关键字。 8、author：写你的账号或者你的github账号吧 9、license：这个直接回车，开源文件来着。。。 PS：你可以一直回车，之后再packjson里进行编辑这个表单。 2、然后，在目录下新建一个index.js文件，或者你刚才修改了那个entry point的值，那么你这个文件名也跟着改为那个值。这个index.js里面我放了一个压缩的index.min.js。 3、然后，最重要的，写好README.md，一个给大家描述你的包的markdown文件，如果大家都不知道你的代码是做什么的，会有人去下载你的代码吗？哦，对了，最好写英文。我这里写了一套英文版的使用文档和一套中文版的使用文档。三、npm命令登录接下来就是：用npm命令登陆一下： npm login登录的是自己注册的用户名和密码。 PS：或者使用添加npm用户 npm adduser四、npm发布到官方网上然后，在你的目录下使用 npm publishPS :每一次发布新的一版，version版本要改变，不然npm会给我报错。一般情况下，一旦你要修改你已经发布后的代码，然后又要执行发布操作，务必到package.json里面，把version改一下，比如从1.0.0改为1.0.1，然后在执行npm publish，这样就可以成功发布了。五、看一下发布的包登录自己的npm官方，就可以看到自己发布的包六、如何使用watermark-dom包（最后边是最重要的）npm包引入第一步：获取水印组件包： npm install watermark-dom 第二步：引入水印模块：import watermark from 'watermark-dom' 第三步：在需要使用水印的页面js中调用水印初始化方法 watermark.init({ watermark_txt: "测试水印"});

工具系列简单水印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>效果如下图： ...