Vue全局添加水印

最新推荐文章于 2025-06-11 11:29:05 发布

小周同学:

最新推荐文章于 2025-06-11 11:29:05 发布

阅读量344

点赞数 2

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weixin_58495461/article/details/138212329

1.创建warterMark.js

/*水印配置*/
//声明 
let watermark = {
   
   }
//水印配置 
let setWatermark = (str1, str2, str3) => {
   
   
  let id = '1.23452384164.123412415'
  // 移除水印 判断
  if (document.getElementById(id) !== null) {
   
   
    document.body.removeChild(document.getElementById(id))
  }

  //创建画布
  let createCanvas = document.createElement('canvas')
  // 设置canvas画布大小
  createCanvas.width = 280 //宽度
  createCanvas.height = 220 //高度

  //创建Context2D对象作为2D渲染的上下文。
  let Context2D = createCanvas.getContext('2d')
  /*水印样式调整配置*/
  Context2D.font = '16px Vedana' //水印文字大小
  Context2D.fillStyle = '#000' //水印颜色 HEX格式,可使用red 或者rgb格式

  // 平移并斜着展示整个水印
  Context2D.translate(createCanvas.width / 2, createCanvas.height