uniapp上传图片添加水印

Uniapp 中可以使用 Canvas 绘制图片并添加水印，然后将绘制好的图片上传到服务器。以下是一个简单的示例代码：

<template>
  <view>
    <input type="file" @change="chooseImage">
    <canvas canvas-id="canvas" style="width:100%;height:100%;display:none;"></canvas>
    <image :src="imageUrl" mode="aspectFit"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    chooseImage(event) {
      const file = event.target.files[0]
      const canvas = uni.createCanvasContext('canvas', this)
      const image = canvas.createImage()
      image.src = URL.createObjectURL(file)
      image.onload = () => {
        // 绘制图片
        canvas.drawImage(image, 0, 0, canvas.width, canvas.height)
        // 绘制水印
        canvas.setFillStyle('rgba(0,0,0,0.5)')
        canvas.setFontSize(20)
        canvas.fillText('水印', 10, 30)
        // 生成图片并上传
        canvas.draw(false, () => {
          uni.canvasToTempFilePath({
            canvasId: 'canvas',
            success: (res) => {
              // 上传图片
              uni.uploadFile({
                url: '上传图片的接口',
                filePath: res.tempFilePath,
                name: 'file',
                success: (res) => {
                  console.log(res)
                  this.imageUrl = res.data
                },
                fail: (err) => {
                  console.log(err)
                }
              })
            }
          })
        })
      }
    }
  }
}
</script>

需要注意的是，Canvas 的宽高要与图片的宽高一致，水印的位置和样式可以根据需求调整。