JS为网页添加文字水印【原创】

        最近需要实现为网页添加水印的功能，由于水印的信息是动态生成的，而百度谷歌上的方法往往都是为网页添加图片水印或为图片添加水印，而为网页添加文字水印相关资料较少，于是就自己动手写了这个代码。

        通常加动态水印的思路是：后台服务端根据参数动态生成图片，前端设置body的background-url或者利用遮罩层+事件委托的方式实现。

 

        本文在这里主要是利用HTML5中canvas来实现动态生成图片，再利用body设置background-url来实现为网页增加文字水印

 

代码如下：

 

/**
* 为网页添加文字水印
* @param {String} str 要添加的字符串
*/
function addWaterMarker(str){

var can = document.createElement('canvas');
var body = document.body;

body.appendChild(can);

can.width=400;
can.height=200;
can.style.display='none';

var cans = can.getContext('2d');
cans.rotate(-20*Math.PI/180);
cans.font = "16px Microsoft JhengHei";
cans.fillStyle = "rgba(17, 17, 17, 0.50)";
cans.textAlign = 'left';
cans.textBaseline = 'Middle';
cans.fillText(str,can.width/3,can.height/2);

body.style.backgroundImage="url("+can.toDataURL("image/png")+")";

}

 

        读者可以在任意的网站，打开F12的Console运行上段代码，然后再调用该方法，即可看到效果（如果网页利用其他遮罩层实现背景图片，该方法则无法生效，应该考虑利用遮罩层+事件委托的方案）：