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>