uniapp+uview实现手机端上传照片带水印（保姆级全过程）

目录

前言：实现思路

步骤一、在界面使用uview的u-upload组件、放置canvas标签

步骤二、在afterRead方法中获取照片url，并创建画布生成水印，再将生成水印的照片上传到服务器

1、afterRead方法

2、照片加水印的方法

3、上传照片至服务器

4、处理水印换行操作

---

最终实现照片加水印效果（水印内容可自定义）：

前言：实现思路

我的实现思路：使用uview的u-upload组件，在上传照片时候会调用afterRead方法，可以获取上传附件的相关属性信息，拿到照片的url之后，调用uni.getImageInfo方法，在uni.getImageInfo的成功回调函数中使用uni.createCanvasContext创建画布，制作水印的文本信息，制作完成后再使用uni.canvasToTempFilePath将画布内容转成图片，再将要上传照片的路径转换成新生成的带有水印照片的url，调用接口完成上传，至此过程结束。

步骤一、在界面使用uview的u-upload组件、放置canvas标签

<u-form-item
    label="技术/安全交底"
    required
    prop="JSAQJD"
>
    <u-upload
        :fileList="JSAQJD"
        @afterRead="afterRead"
        @delete="deletePic"
        name="JSAQJD"
        multiple
        :maxCount="3"
    >
    </u-upload>
    <view style="position: absolute;top: -999999px;">
        <view>
            <canvas style="width: 1000px;height: 1000px;" canvas-id="myCanvas"></canvas>
        </view>
    </view>
</u-form-item>