页面添加水印

如何给页面添加水印

在生活中，经常会在看到手机里面一些页面比如公司发的比较机密的文件、个人工资详情等会有水印背景。那么，这个在前端怎么实现？

如何给页面添加相应水印？

思路：通过canvas画出一个以水印文字为内容生成的图片，将图片设置为页面的背景图片，调整样式就OK了。

是不是很简单呢？

上代码

// 水印相关配置项
defaultOption: {
  id: "watermark-1",  
  width: 240,//单个水印区域宽度
  height: 240, //单个水印区域高度
  text: "野猪佩奇 2021-09-22", //水印文案
  font: "24px Times New Roman", //字体样式
  rotateDegree: (30 * Math.PI) / 180 //水印文字旋转角度
}
// 创建cavas对象，将配置项里的内容添加到cavas上
createImageUrl(defaultOption) {
  let canvas = document.createElement("canvas");
  let text = options.text;
  canvas.width = options.width;
  canvas.height = options.height;
  let ctx = canvas.getContext("2d");
  ctx.font = options.font;
  ctx.fillStyle = "rgba(204,204,204,0.65)";
  ctx.rotate(options.rotateDegree);
  ctx.textAlign = "left";
  ctx.fillText(text, 35, 32); // 实体文字
  const url = canvas.toDataURL("image/png");
  this.$refs.card.$el.style.background = `url('${url}') repeat top left`;
}

需要注意的，生成的是单一的画布图片，要想整个页面都充满水印，需要给背景图片添加repeat属性

效果图:

水印效果图

关注微信公众号，互相监督学习进步！