客户端安全2-canvas制作水印

前些时间应为工作需要制作网页水印功能，一开始没做过，感觉挺高大上的功能，所有就去问了下度娘，然后看到一篇博客里面写的，看了效果觉得还不错，然后就download下来改吧改吧，就用了

1.Dom水印

Paste_Image.png

这个插件原理也很简单，就是根据屏幕的高宽，计算水印块的数量，然后动态生成一个个div，定位到页面最上层。那么问题来了，如果这些水印是盖在上面的就会影响页面的操作交互，后来在评论区发现了一个新的属性“pointerEvents”，把div的这个属性设置为“none”就可以穿透点击了，水印就像云彩一样飘在上面但却不影响你对页面的操作（如click,hover等事件都会正常触发）。

• 原文地址：http://www.cnblogs.com/GongQi/p/4074609.html

2.canvas水印

后来因为我们的页面内容比较多，且用了iview渲染，页面比较卡，想在页面性能上做一下优化，水印用上一个方法创建dom,会比较耗内存，所以做了一下优化，改用H5的canvas话。因为水印内容是动态的，所以我的原理是先用canvas画出水印，然后在使用canvas的canvas.toDataURL("image/png")方法生成图片，然后在放到一个div里面平铺。这个div定位到页面上面，ok搞定，发现代码比第一个少了很多。

$('body').append($('<canvas id="canvas" height="80" width="120"></canvas>'));
    var canvas = document.getElementById('canvas');
    var mask_div = document.createElement('div');
    var ctx = canvas.getContext("2d");
    ctx.font="normal 16px Microsoft Yahei"; //设置样式
    ctx.fillStyle = '#ccc';
    ctx.rotate(20*Math.PI/180);
    ctx.fillText("XXX",30,20);
    ctx.font="normal 12px Microsoft Yahei"; //设置样式
    ctx.fillText("补充信息XXX",15,40);
    document.body.appendChild(canvas);
    var src = canvas.toDataURL("image/png");
    mask_div.style.position = 'fixed';
    mask_div.style.zIndex = '9999';
    mask_div.style.top = '0';
    mask_div.style.left = '0';
    mask_div.style.height = '100%';
    mask_div.style.width = '100%';
    mask_div.style.backgroundImage='URL(' + src + ')';
    document.body.appendChild(mask_div);
    $(canvas).remove();

效果图

Paste_Image.png
应为pointerEvents和canvas都有兼容新问题，所有只有在高版本的浏览器适用。当然也可以做一下兼容，可以看一下 张鑫旭大神的兼容做法（http://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/）
但是我试过不太好使，他的做法就是根据鼠标坐标定位触发下面元素的事件，局限性比较大。