uniapp vue3照片加水印

在uniapp中使用vue3给照片添加水印，你可以按照以下步骤进行操作：

1. 首先，在你的uniapp项目中创建一个新的组件，命名为`wm-watermark.vue`。

2. 在`wm-watermark.vue`组件中，使用`<template>`标签定义组件的模板，添加一个`<canvas>`元素用于绘制水印。

3. 在`<script>`标签中，导入所需的依赖库，例如`exif-js`用于获取照片的exif信息。

4. 在`<script>`标签中，定义组件的属性和方法。你可以添加一个`text`属性用于设置水印文本，以及一个`drawWatermark`方法用于绘制水印。

5. 在`<script>`标签中，使用`mounted`钩子函数监听组件的挂载事件，在组件挂载后获取照片的exif信息，并调用`drawWatermark`方法绘制水印。

6. 在你需要添加水印的页面中，引入`wm-watermark.vue`组件，并在需要添加水印的位置使用`<wm-watermark>`标签，并设置`text`属性为你想要的水印文本。

下面是一个示例代码：

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

<script>
import EXIF from 'exif-js';

export default {
  props: {
    text: {
      type: String,
      default: 'Watermark'
    }
  },
  mounted() {
    this.drawWatermark();
  },
  methods: {
    drawWatermark() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      
      // 绘制水印文本
      ctx.font = '20px Arial';
      ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
      ctx.fillText(this.text, 10, 50);
      
      // 绘制照片
      const img = new Image();
      img.src = 'path/to/your/photo.jpg';
      img.onload = () => {
        // 获取照片的exif信息
        EXIF.getData(img, function() {
          const orientation = EXIF.getTag(this, 'Orientation');
          
          // 根据照片的exif信息旋转照片
          switch (orientation) {
            case 3:
              ctx.rotate(Math.PI);
              ctx.drawImage(img, -canvas.width, -canvas.height, canvas.width, canvas.height);
              break;
            case 6:
              ctx.rotate(Math.PI / 2);
              ctx.drawImage(img, 0, -canvas.width, canvas.height, canvas.width);
              break;
            case 8:
              ctx.rotate(-Math.PI / 2);
              ctx.drawImage(img, -canvas.height, 0, canvas.height, canvas.width);
              break;
            default:
              ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
              break;
          }
        });
      };
    }
  }
}
</script>

在你的页面中使用`<wm-watermark>`标签，并设置`text`属性为你想要的水印文本，如下所示：

<template>
  <view>
    <wm-watermark text="秦青电子版权所有"></wm-watermark>
    <!-- 其他内容 -->
  </view>
</template>

<script>
import wmWatermark from '../../components/wm-watermark.vue';

export default {
  components: {
    wmWatermark
  },
  // 其他代码
}
</script>

请注意，上述示例代码中的`path/to/your/photo.jpg`需要替换为你实际的照片路径。