vue项目中图片显示前端使用js添加水印

需求：在项目中为了防止截图或者下载导致内部图片泄露，或者图片传播溯源，需要将项目中展示的图片添加上属于自己公司的水印标识。

解决思路：
1、 先将img图片绘制为canvas
2、 使用canva 绘制所要自定义添加的内容标识
3、 再将绘制好的canvas转为base64的地址使用img显示出来
代码及步骤注释如下（可以直接看效果显示）：

<template>
  <div>
  <img id="myimg" :src="imgUrl" alt="">
  </div>
</template>
<style>
  .seamless-warp {
    height: 229px;
    overflow: hidden;
  }
</style>
<script>
export default {
  data () {
    return {
      imgUrl: ''
    }
  },
  mounted () {
    // 调用方法传入对应的参数
    this.getImgUrl({
      url: 'http://172:8080/自己的图片地址,
      content: '周末了撸串去啊',
      cb: (base64Url) => {
        // 使用两种方法设置显示img的src都可以
        // document.getElementById('myimg').src = base64Url
        this.imgUrl = base64Url
      }
    })
  },
  methods: {
    getImgUrl ({
      url = '',
      textAlign = 'left',
      textBaseline = 'top',
      font = '18px Microsoft Yahei',
      fillStyle = 'rgba(255, 255, 255, 0.5)',
      content = '我是默认的水印参数',
      cb = null,
      textX = 100,
      textY = 30
    } = {}) {
      // 创建所需要添加水印的img图片
      const img = new Image()
      img.src = url
      img.crossOrigin = 'anonymous'
      img.onload = function () {
        // 创建canvas，并将创建的img绘制成canvas
        const canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        const ctx = canvas.getContext('2d')

        ctx.drawImage(img, 0, 0)
        ctx.textAlign = textAlign
        ctx.textBaseline = textBaseline
        ctx.font = font
        ctx.fillStyle = fillStyle
        ctx.rotate((Math.PI / 180) * 15)
        // 循环绘制水印
        // ctx.fillText(content, img.width - textX, img.height - textY)
        for (let i = 0; i < img.height / 120; i++) {
          for (let j = 0; j < img.width / 50; j++) {
            ctx.fillText(content, i * 200, j * 100, img.width)
          }
        }
        // 将绘制完成的canvas转换为base64的地址
        const base64Url = canvas.toDataURL()
        cb && cb(base64Url)
      }
    }
  }
}
</script>

效果如下图：

参考解决方案原博客地址：https://musicfe.cn/page/15
And ：https://blog.csdn.net/qq_39041201/article/details/107880439