在Vue中使用CanvasAPI动态生成带水印的图片

在 Vue 中给图片添加水印，可以通过 Canvas API 实现动态生成带水印的图片，以下是一个完整的实现过程。

1.1 方法 1: 使用 Canvas API

这个方法通过在 Vue 组件中使用 Canvas 来绘制带有水印的图像。

1.1.1 Vue 组件代码 (WatermarkedImage.vue)

<template>
  <div>
    <img :src="watermarkedImageUrl" alt="Image with watermark" />
  </div>
</template>

<script>
export default {
  name: 'WatermarkedImage',
  props: {
    imageUrl: {
      type: String,
      required: true
    },
    watermarkText: {
      type: String,
      default: 'Sample Watermark'
    }
  },
  data() {
    return {
      watermarkedImageUrl: null
    };
  },
  mounted() {
    this.createWatermarkedImage();
  },
  methods: {
    createWatermarkedImage() {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      const img = new Image();
      
      img.onload = () => {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0, img.width, img.height);

        // 设置水印样式
        ctx.font = 'bold 20px Arial';
        ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // 绘制水印
        ctx.fillText(this.watermarkText, canvas.width / 2, canvas.height / 2);

        // 将带水印的图像转换为 Base64 编码
        this.watermarkedImageUrl = canvas.toDataURL('image/png');
      };

      img.src = this.imageUrl;
    }
  }
};
</script>

1.2 如何使用该组件

可以在父组件中引入 WatermarkedImage 组件，并传递图片 URL 和水印文本：

<template>
  <div>
    <WatermarkedImage :imageUrl="imageSrc" :watermarkText="watermark" />
  </div>
</template>

<script>
import WatermarkedImage from './WatermarkedImage.vue';

export default {
  components: {
    WatermarkedImage
  },
  data() {
    return {
      imageSrc: 'https://example.com/path/to/image.jpg',
      watermark: 'My Watermark Text'
    };
  }
};
</script>

1.3 解释与注意事项

• Canvas API：利用 HTML5 Canvas 在前端生成水印图像。首先将原始图像绘制到 Canvas 上，然后在其上绘制水印。
• 性能考虑：这种方法在客户端生成水印，不需要服务器处理，但如果处理大量图片，可能会影响页面性能。

2. 服务器端水印生成（替代方案）

对于大量图片或更高性能的需求，推荐在服务器端处理图像水印。例如，可以通过 Python 的 PIL 库或者 Node.js 的 sharp 库在服务器端生成带有水印的图片，然后在 Vue 前端仅加载处理后的图像。

这种方法减少了客户端的处理负担，适用于需要大量图片处理的场景。