vue页面实现水印相机

实现水印相机功能

在Vue中实现水印相机功能，可以通过以下步骤完成。核心思路是利用Canvas绘制水印，并将Canvas内容转换为图片。

使用Canvas绘制水印

创建一个Canvas元素，设置其宽度和高度与图片一致。在Canvas上绘制图片和水印文字。

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept="image/*">
    <canvas ref="canvas"></canvas>
    <button @click="downloadImage">下载带水印图片</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (e) => {
        const img = new Image();
        img.onload = () => {
          this.drawWatermark(img);
        };
        img.src = e.target.result;
      };
      reader.readAsDataURL(file);
    },

    drawWatermark(img) {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');

      canvas.width = img.width;
      canvas.height = img.height;

      ctx.drawImage(img, 0, 0, img.width, img.height);

      ctx.font = '30px Arial';
      ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
      ctx.textAlign = 'center';
      ctx.fillText('Watermark', canvas.width / 2, canvas.height / 2);
    },

    downloadImage() {
      const canvas = this.$refs.canvas;
      const link = document.createElement('a');
      link.download = 'watermarked-image.png';
      link.href = canvas.toDataURL('image/png');
      link.click();
    }
  }
};
</script>

添加自定义水印选项

允许用户自定义水印文字、颜色、大小和位置。

data() {
  return {
    watermarkText: '自定义水印',
    watermarkColor: 'rgba(255, 255, 255, 0.5)',
    watermarkSize: 30,
    watermarkPosition: { x: 0.5, y: 0.5 }
  };
},

methods: {
  drawWatermark(img) {
    // ...其他代码

    ctx.font = `${this.watermarkSize}px Arial`;
    ctx.fillStyle = this.watermarkColor;
    ctx.fillText(
      this.watermarkText,
      canvas.width * this.watermarkPosition.x,
      canvas.height * this.watermarkPosition.y
    );
  }
}

实现重复水印效果

在Canvas上重复绘制水印，覆盖整个图片。

drawRepeatedWatermark(img) {
  const canvas = this.$refs.canvas;
  const ctx = canvas.getContext('2d');

  canvas.width = img.width;
  canvas.height = img.height;

  ctx.drawImage(img, 0, 0, img.width, img.height);

  ctx.font = `${this.watermarkSize}px Arial`;
  ctx.fillStyle = this.watermarkColor;

  const stepX = 200;
  const stepY = 200;

  for (let x = 0; x < canvas.width; x += stepX) {
    for (let y = 0; y < canvas.height; y += stepY) {
      ctx.fillText(this.watermarkText, x, y);
    }
  }
}

添加旋转水印效果

通过旋转Canvas上下文，实现斜向水印效果。

drawRotatedWatermark(img) {
  const canvas = this.$refs.canvas;
  const ctx = canvas.getContext('2d');

  canvas.width = img.width;
  canvas.height = img.height;

  ctx.drawImage(img, 0, 0, img.width, img.height);

  ctx.font = `${this.watermarkSize}px Arial`;
  ctx.fillStyle = this.watermarkColor;

  ctx.save();
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.rotate(-45 * Math.PI / 180);

  const step = 200;
  for (let x = -canvas.width; x < canvas.width * 2; x += step) {
    for (let y = -canvas.height; y < canvas.height * 2; y += step) {
      ctx.fillText(this.watermarkText, x, y);
    }
  }

  ctx.restore();
}

使用第三方库简化实现

对于更复杂的水印需求，可以使用第三方库如watermarkjs。

import watermark from 'watermarkjs';

methods: {
  async applyWatermarkWithLibrary() {
    const file = this.$refs.fileInput.files[0];
    if (!file) return;

    const watermarkedImage = await watermark([file])
      .image(watermark.text.lowerRight('Watermark', '40px Arial', '#fff', 0.5))
      .then(img => img.src);

    this.$refs.preview.src = watermarkedImage;
  }
}

响应式设计考虑

确保Canvas在不同设备上正确显示，需要根据屏幕尺寸调整Canvas大小。

adjustCanvasSize() {
  const canvas = this.$refs.canvas;
  const container = this.$refs.container;

  canvas.style.width = '100%';
  canvas.style.height = 'auto';

  const ratio = canvas.width / canvas.height;
  const containerWidth = container.clientWidth;

  canvas.width = containerWidth;
  canvas.height = containerWidth / ratio;
}

以上方法提供了从基础到高级的水印相机实现方案，可以根据具体需求选择适合的实现方式。