vue实现前端图片加水印

#工作原理

创建一个Image对象，设置跨域属性，然后指定图片的src。当图片加载完成后，创建一个canvas元素，将图片绘制到canvas上。接着计算出水印文字的大小和字体样式，并设置填充颜色。通过调用drawingWatermark函数得到水印的位置信息，然后遍历位置信息，对每个水印进行绘制。最后将canvas转换为DataURL，保存为addwaterUrl

具体代码如下：

<template>
<div id="myImageContainer">
  <button @click="downloadImage">下载加水印图片</button>
  <img width="200px" :src="addwaterUrl" alt="" />
</div>
</template>

<script>
export default {
  data() {
    return {
      addwaterUrl: "",
    };
  },
  computed: {
   
  },
  methods: {
    addWatermark() {
      const img = new Image();
      let data = new Date()
      // 由于我的是阿里云图片需要天机允许跨域
      img.crossOrigin = "Anonymous";
      // 这里放需要加水印的图片地址
      img.src = 'http://oss-yaen.oss-cn-hangzhou.aliyuncs.com/bigFile/%E5%BD%B1%E5%AD%90%E6%9C%8D%E5%8A%A1%E6%A0%87%E5%87%86%E6%B5%81%E7%A8%8B_00.png';
      img.onload = () => {
        const canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height); //
        const minDimension = Math.min(img.width, img.height);
        const fontSize = Math.floor(minDimension / 20);
        console.log(new Date() - data);
        ctx.font = 'bolder ' + fontSize + "px PingFangSC-Regular, PingFang SC";

        ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
        let resultText = drawingWatermark(img.height, img.width);

        resultText.forEach(function (value) {
          ctx.save(); // 保存当前的绘图状态
          ctx.translate(value.x, value.y); // 将坐标原点移动到水印文字位置
          ctx.rotate(Math.PI / 4); // 旋转45度（弧度制）
          ctx.fillText("水印文字", 0, 0);
          ctx.restore(); // 恢复之前保存的绘图状态
        });
        // 第二次描边
        ctx.strokeStyle = "rgba(18, 69, 155, 1)"; // 设置文字描边颜色
        ctx.lineWidth = 2;
        let resultText2 = drawingWatermark(img.height, img.width);
        resultText2.forEach(function (value) {
          ctx.save(); // 保存当前的绘图状态
          ctx.translate(value.x, value.y); // 将坐标原点移动到水印文字位置
          ctx.rotate(Math.PI / 4); // 旋转45度（弧度制）
          ctx.strokeText("水印文字", 0, 0); // 绘制水印文字
          ctx.restore(); // 恢复之前保存的绘图状态
        });
        this.addwaterUrl = canvas.toDataURL();
      };

      function drawingWatermark(height, width) {
        let result = [];
        const rowCount = 5; // 水印文字的行数
        const colCount = 3; // 水印文字的列数
        const marginX = width / colCount; // 水印文字的水平间距
        const marginY = height / rowCount; // 水印文字的垂直间距
        for (let i = 0; i < rowCount; i++) {
          for (let j = 0; j < colCount; j++) {
            let value = {};
            value.x = j * marginX;
            value.y = i * marginY;
            result.push(value);
          }
        }
        return result;
      }
    },

    downloadImage() {
      if (this.addwaterUrl) {
        const link = document.createElement("a");
        link.href = this.addwaterUrl;
        link.download = "watermarked_image.jpg";
        link.click();
      }
    },
  },
  mounted() {
    this.addWatermark();
  },
};
</script>