前端vue给下载图片添加水印

在Vue.js中，给下载的图片添加水印通常需要结合HTML、CSS以及JavaScript来实现。以下是一个简单的步骤：

1. **创建组件**:
首先，你可以创建一个自定义组件，比如`WatermarkImage`，用于处理带水印的图片。

<template>
  <div>
    <img :src="imageSrc" :data-src="originalSrc" @click="downloadWithWatermark"/>
  </div>
</template>

<script>
export default {
  props: ['imageSrc', 'originalSrc'],
  methods: {
    downloadWithWatermark() {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      
      // 设置画布大小与图片一致
      canvas.width = this.imageSrc.naturalWidth;
      canvas.height = this.imageSrc.naturalHeight;

      // 绘制原图到canvas
      ctx.drawImage(this.originalSrc, 0, 0);

      // 添加水印
      const watermarkText = "Your Watermark";
      ctx.font = "bold 14px Arial";
      ctx.fillStyle = "#ffffff"; // 水印颜色
      ctx.textAlign = "center";
      ctx.fillText(watermarkText, canvas.width / 2, canvas.height - 16); 

      // 创建新的 Blob 对象
      const watermarkedBlob = new Blob([canvas.toDataURL()], { type: "image/png" });

      // 创建下载链接
      const link = document.createElement("a");
      link.href = URL.createObjectURL(watermarkedBlob);
      link.download = "watermarked_" + this.originalSrc.name;
      link.click();
    }
  },
};
</script>

2. **组件使用**:
将这个组件应用到你的页面上，并传递原始图片的URL和想要下载的图片URL作为props。

<WatermarkImage imageSrc="path/to/image.jpg" originalSrc="path/to/original/image.jpg" />

**注意事项**:
- 这只是一个基本示例，实际实现可能会更复杂，例如调整文字位置、大小或颜色，支持多种图片格式等。
- 如果图片很大或者水印覆盖范围广，可能会影响性能和用户体验，所以需优化加载过程。