引言

一、Canvas实现图片水印

1.1 基本原理

1.2 代码示例

以下是一个简单的Vue组件示例，演示如何使用Canvas添加文字水印：

<template>
  <div>
    <canvas ref="watermarkCanvas" width="300" height="200"></canvas>
    <img ref="targetImage" src="example.jpg" alt="Example Image" @load="addWatermark" />
  </div>
</template>

<script>
export default {
  methods: {
    addWatermark() {
      const canvas = this.$refs.watermarkCanvas;
      const img = this.$refs.targetImage;
      const ctx = canvas.getContext('2d');
      
      // 设置canvas大小与图片相同
      canvas.width = img.width;
      canvas.height = img.height;
      
      // 绘制图片
      ctx.drawImage(img, 0, 0);
      
      // 添加文字水印
      this.addTextWatermark(ctx, canvas);
    },
    addTextWatermark(ctx, canvas) {
      ctx.font = '14px Arial';
      ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
      ctx.fillText('Watermark Text', 50, 150);
    }
  }
}
</script>

1.3 注意事项

  • 使用Canvas绘制水印时，需要注意Canvas的宽度和高度与图片相同，以确保水印能够正确显示。
  • 添加文字水印时，可以通过修改ctx.font和ctx.fillStyle属性来调整字体和颜色。

二、使用第三方插件实现图片水印

2.1 介绍

2.2 安装

首先，你需要通过npm或yarn安装tui-image-editor：

npm i tui-image-editor
# 或者
yarn add tui-image-editor

2.3 使用

以下是一个简单的Vue组件示例，演示如何使用tui-image-editor添加水印：

<template>
  <div>
    <div id="tui-image-editor"></div>
  </div>
</template>

<script>
import "tui-image-editor/dist/tui-image-editor.css";
import ImageEditor from "tui-image-editor";

export default {
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.instance = new ImageEditor(document.querySelector("#tui-image-editor"), {
        includeUI: {
          // ...
        },
        loadImage: {
          path: "example.jpg",
          name: "Sample"
        }
      });
    }
  }
}
</script>

2.4 注意事项

  • 使用第三方插件时，需要了解插件的文档和API，以便正确使用。
  • 部分插件可能需要付费购买。

三、总结