使用canvas给图片添加水印功能

 效果图

 

 代码实现不易， 如果对您有用，请点个赞~~

<template>
  <div>
    <form action="#">
      <input type="file" @change="handleUploadSuccess">
    </form>
    <img :src = imgSrc alt="">
  </div>
</template>

<script>
export default {
  name: "ImageWatermarking",
  data() {
    return {
      imgSrc: ""
    }
  },
  methods: {
    handleUploadSuccess(event) {
      // 获取到图片
      let file = event.target.files[0];
      let imageUrl = URL.createObjectURL(file);

      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      let image = new Image();
      image.src = imageUrl;
      image.onload = () => {
        let { width, height } = image;
        canvas.width = width;
        canvas.height = height;

        ctx.drawImage(image, 0, 0);
        ctx.font = '30px Arial';
        ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
        ctx.textAlign = 'center';

        // 保存画布状态
        ctx.save();

        // 循环绘制水印
        const interval = 200; // 水印间隔
        for (let x = 0; x < width; x += interval) {
          for (let y = 0; y < height; y += interval) {
            ctx.translate(x, y);
            ctx.rotate(-Math.PI / 4);
            ctx.fillText('watermark', 0, 0);
            ctx.restore(); // 恢复画布状态
            ctx.save(); // 保存画布状态
          }
        }

        // 恢复画布状态
        ctx.restore();

        // 将 canvas 转为 base64 格式的图片
        const dataURL = canvas.toDataURL('image/png');
        this.imgSrc = dataURL;
        console.log(dataURL)
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>