前端添加背景水印

前言

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

技术解析

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

实现方案

实现代码

//配置示例
{
   
    container = document.body, 
    width = '200px',   //水印宽度
    height = '148px',  //水印宽度
    textAlign = 'content', //水印方向
    textBaseline = 'middle', 
    font = '16px Microsoft Yahei', //水印字体格式
    content = '水印', //水印内容
    rotate = '45', //字体倾斜角度
    zIndex =