uniapp 小程序 上传图片添加水印

UniApp 是一套基于 Vue.js 的前端框架，它旨在提供一次编写、多次部署的能力，支持快速开发小程序、Web、H5 和原生应用。在 UniApp 中，如果你想要在小程序里上传图片并添加水印，可以按照以下步骤操作：

1. 首先，在项目中引入必要的组件和库，例如uni-uploader用于文件上传，以及`uni.canvas`用于绘制水印。

<template>
  <view>
    <uni-uploader action="your/upload/url" :on-success="handleSuccess"></uni-uploader>
    <canvas ref="watermarkCanvas" :width="imageWidth" :height="imageHeight"></canvas>
  </view>
</template>

2. 定义`handleSuccess`函数，当图片上传成功后，获取返回的URL，并在`mounted`生命周期钩子中加载图片到`ref`为`watermarkCanvas`的画布上，然后添加水印。

<script>
export default {
  data() {
    return {
      imageUrl: '',
      imageWidth: 0,
      imageHeight: 0,
    };
  },
  mounted() {
    this.getImageInfo().then(() => {
      // 这里假设你的水印文字、位置和样式已准备就绪
      this.addWatermark();
    });
  },
  methods: {
    handleSuccess(res) {
      this.imageUrl = res.data.url;
      this.getImageInfo();
    },
    
    getImageInfo() {
      const img = new Image();
      img.src = this.imageUrl;
      img.onload = () => {
        this.imageWidth = img.width;
        this.imageHeight = img.height;
        this.$nextTick(() => {
          this.addWatermark();
        });
      };
    },
    
    addWatermark() {
      // 使用uni.canvas API 在画布上绘制水印
      const ctx = this.$refs.watermarkCanvas.getContext('2d');
      // ... 编写绘制水印的具体代码
    },
  },
};
</script>