vue 在图片上加水印

在Vue中给图片添加水印可以通过自定义指令来实现。下面是一个示例的自定义指令，可以给图片添加水印：

// 创建一个自定义指令
Vue.directive('watermark', {
  bind: function(el, binding) {
    // 创建一个canvas元素
    const canvas = document.createElement('canvas');
    canvas.width = el.width;
    canvas.height = el.height;
    const ctx = canvas.getContext('2d');
    
    // 绘制水印文本
    ctx.font = '30px Arial';
    ctx.fillStyle = 'rgba(0,0,0,0.2)';
    ctx.textAlign = 'center';
    ctx.fillText(binding.value, canvas.width/2, canvas.height/2);
    
    // 将canvas中的内容绘制到图片上
    ctx.drawImage(el, 0, 0);
    
    // 替换原始图片
    el.src = canvas.toDataURL('image/jpeg');
  }
});

然后在Vue中的模板中使用该指令，给需要添加水印的图片添加 `v-watermark` 属性，指定水印文本，如下所示：

<template>
  <div>
    <img src="your_image_url" v-watermark="watermarkText" alt="Image with watermark">
  </div>
</template>

<script>
export default {
  data() {
    return {
      watermarkText: 'Watermark',
    };
  },
};
</script>

在上面的例子中，`your_image_url` 是需要添加水印的图片的URL，`watermarkText` 是水印文本，可以根据需要进行修改。

当页面渲染完成后，自定义指令会将水印绘制在图片上，并替换原始图片，实现了给图片添加水印的效果。