vue2 canvas水印

Vue2 中使用 Canvas 来添加水印通常是通过 JavaScript 和其 API 实现的。Canvas 是一种 HTML5 标准提供的画布元素，允许开发者在网页上绘制图形、动画等。以下是一个简单的步骤来创建 Vue 组件并在 canvas 上添加文字水印：

1. **组件结构**:
创建一个名为 `WatermarkCanvas.vue` 的文件，包含模板部分用于显示canvas以及JavaScript部分处理水印。

<template>
  <div>
    <canvas ref="watermarkCanvas"></canvas>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const canvasRef = ref(null);
    const ctx = canvasRef.value.getContext('2d');

    // 添加水印方法
    const addWatermark = () => {
      ctx.save(); // 保存当前状态
      ctx.font = '16px Arial'; // 设置字体样式
      ctx.fillStyle = '#aaa'; // 设置颜色
      ctx.textAlign = 'center';
      ctx.fillText('Your Watermark Here', canvas.width / 2, canvas.height - 20); // 水印位置
      ctx.restore(); // 恢复到保存的状态
    };

    return {
      canvasRef,
      addWatermark
    };
  },
}
</script>

2. **使用示例**:
在组件挂载后，你可以通过调用 `addWatermark` 函数在合适的时机动态添加水印，如在组件的 mounted 生命周期钩子里。

mounted() {
  this.addWatermark();
},