Vue页面添加水印

@洛飞

已于 2022-06-17 15:03:26 修改

阅读量356

点赞数 2

分类专栏：前端vue 文章标签： javascript 前端 vue.js

于 2021-11-23 11:16:38 首次发布

本文链接：https://blog.csdn.net/m0_57891856/article/details/121488882

版权

本文档介绍了如何在Vue3应用中添加水印效果。首先，创建了watermark.js文件来编写水印逻辑，然后在App.vue组件中进行配置，以确保水印在页面加载时显示。

摘要由CSDN通过智能技术生成

1.编写watermark.js文档

let watermark = {}

let setWatermark = (str) => {
  let id = '1.23452384164.123412416';

  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id));
  }

  //创建一个画布
  let can = document.createElement('canvas');
  //设置画布的长宽
  can.width = 700;
  can.height = 500;

  let cans = can.getContext('2d');
  //旋转角度
  cans.rotate(-30 * Math.PI / 180);
  cans.font = "20px SimHei";
  //设置填充绘画的颜色、渐变或者模式
  cans.fillStyle = 'rgba(200, 200, 200, 0.30)';
  //设置文本内容的当前对齐方式
  cans.textAlign = 'left';
  //设置在绘制文本时使用的当前文本基线
  cans.textBaseline = 'Middle';
  //在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
  cans.fillText(str, can.width / 8, can.height / 2);

  let div = document.createElement('div');
  div.id = id;
  div.style.pointerEvents = 'none';
  div.st