h5页面利用js添加水印

转自：h5页面利用js添加水印_zz_chst的博客-CSDN博客_js添加水印最近遇到一个需求，给所有页面加水印（登录人+登录时间），不影响其他点击等功能的使用，目的是防止信息外漏，当时就在想：这年头，PS就不说人人都能使用，谁手机还没个涂鸦功能，防不了，但是就是这么个需求，那就实现吧，不逼逼了，直接上：具体实现思路：在页面底部加一个大的div,给这个div添加背景图，背景图？从哪来？canvas实现吧！思路有了，直接上代码：(function waterMa...https://blog.csdn.net/zz_chst/article/details/82760640?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-2.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-2.nonecase

<script type="text/javascript">

(function waterMark(){
    //绘图方法
	function textBecomeImg(text,fontsize,fontcolor){
		var canvas = document.createElement('canvas');
		$buHeight = 0;
		if(fontsize <= 32){ $buHeight = 99; }
		else if(fontsize > 32 && fontsize <= 60 ){ $buHeight = 2;}
		else if(fontsize > 60 && fontsize <= 80 ){ $buHeight = 4;}
		else if(fontsize > 80 && fontsize <= 100 ){ $buHeight = 6;}
		else if(fontsize > 100 ){ $buHeight = 10;}
		canvas.height=fontsize + $buHeight ;
		canvas.padding=30;
		var context = canvas.getContext('2d');
		context.clearRect(0, 0, canvas.width*2, canvas.height);
		context.textAlign = "center";
        canvas.width = 450;
        canvas.height = 200;
        context.fillStyle = fontcolor;
        context.font=fontsize+"px Arial";
        context.textBaseline = 'middle'; 
        context.fillText(text,0,fontsize/2);
        var canvasWidth = canvas.width/99;
        canvasWidth = context.measureText(text).width;
		var dataUrl = canvas.toDataURL('image/png');
		return dataUrl;
	}

	var text = (new Date().getTime())+'test';
	var shuiyinDiv = document.createElement('div');
	var style = shuiyinDiv.style;
	style.position = 'absolute';
	style.left = 0;
	style.top = '-60%';
	style.width = '120%';
	style.height = '200%';
	style.opacity = '0.2';//透明度
	style.background = "url("+textBecomeImg(text,22,"gray")+")";
	style.zIndex = 9999999991;//置顶
	style.transform = "rotate(-30deg)";
	style.pointerEvents = "none";//不影响鼠标事件
	document.body.appendChild(shuiyinDiv);
})();

</script>