H5页面背景添加水印

68 阅读 0 评论 45 点赞

我是靠谱客的博主寒冷鞋子，最近开发中收集的这篇文章主要介绍H5页面背景添加水印，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
<script type="text/javascript" src="js/index.js" ></script>
</body>
</html>

Js代码

(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.fillStyle = fontcolor;
context.font=fontsize+"px Arial";
context.textAlign = "center";
context.textBaseline = 'middle';
context.fillText(text,0,fontsize/2);
var canvasWidth = canvas.width/99;
canvasWidth = context.measureText(text).width;
canvas.width = 450;
canvas.height = 200;
context.fillStyle = fontcolor;
context.font=fontsize+"px Arial";
context.textBaseline = 'middle';
context.fillText(text,0,fontsize/2);
var dataUrl = canvas.toDataURL('image/png');
return dataUrl;
}
var text = new Date()+'111';
var shuiyinDiv = document.createElement('div');
var style = shuiyinDiv.style;
style.position = 'fixed';
style.left = 0;
style.top = '-10%';
style.width = '200%';
style.height = '200%';
style.opacity = '0.1';
style.background = "url("+textBecomeImg(text,22,"gray")+")";
style.zIndex = 9999999991;
style.transform = "translateX(-100px) rotate(-30deg)";
style.pointerEvents = "none";
document.body.appendChild(shuiyinDiv);
})();