前言

为了防止信息泄露或知识产权被侵犯，在web的世界里，对于页面和图片等增加水印处理是十分有必要的。下面分享一种简单的前端添加页面水印的方式。

技术解析

希望实现的效果是在需要加载水印的盒子上添加水印信息。首先想到的方案就是添加一个新的盒子，通过canvas创建一张含有水印信息的背景图片，填充满想要添加水印的元素。然后将水印设置为背景图。

实现方案

实现代码

//配置示例
{
    container = document.body, 
    width = '200px',   //水印宽度
    height = '148px',  //水印宽度
    textAlign = 'content', //水印方向
    textBaseline = 'middle', 
    font = '16px Microsoft Yahei', //水印字体格式
    content = '水印', //水印内容
    rotate = '45', //字体倾斜角度
    zIndex = 10000,
}
//实现代码
const canvasInfo = function({
   container = document.body,
   width = '200px',
   height = '148px',
   textAlign = 'content',
   textBaseline = 'middle',
   font = '16px Microsoft Yahei',
   content = '水印',
   rotate = '45',
   zIndex = 10000,
} = {}) {
   const canvas = document.createElement('canvas'); //创建canvas
   canvas.setAttribute('width', width); //添加canvas属性
   canvas.setAttribute('height', height);
   const ctx = canvas.getContext('2d');
   ctx.textAlign = textAlign;
   ctx.textBaseline = textBaseline;
   ctx.font = font;
   ctx.rotate((Math.PI / 180) * rotate); //旋转角度
   ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);
   const base64Url = canvas.toDataURL()
   const watermarkDiv = document.createElement('div');
   const styleStr =
	` position:fixed;
	  top:0;
	  left:0;
	  bottom:0;
	  right:0;
	  width:100%;
	  height:100%;
	  z-index:${zIndex};
	  background-image:url('${base64Url}');
	  opacity: 0.1; 
	 `;
   watermarkDiv.setAttribute('style', styleStr);//添加div属性
   container.insertBefore(watermarkDiv, container.firstChild); //向列表中插入
		}
   canvasInfo()

展示效果

总结

直接通过Canvas绘画，避免了在水印密度较大的情况下大量DOM元素的创建与添加。