uniapp小程序上传照片加水印

html 页面

<view style="width: 0;height: 0;overflow: hidden;" >
            <canvas  canvas-id="firstCanvas"  style="" :style="{ width: width, height: height}" class="canvas"></canvas>
        </view>

changeImage(index) {
            let that = this;
            uni.chooseImage({
                count: 1, //默认9
                sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album'], //从相册选择
                loop: true,
                success: res => {
                    console.log(res);
                    uni.getImageInfo({  //获取拿到图片的信息
                        src: res.tempFilePaths[0],
                        success: result => {
                            console.log(result.path);
                            console.log(result);
                            this.width = result.width + 'rpx';
                            this.height = result.height + 'rpx';
                            let address = '顾仁陪诊';  //传入的水印名称
                            const ctx = uni.createCanvasContext('firstCanvas');  //创建一个画布
                            ctx.drawImage(result.path, 0, 0, result.width / 2, result.height / 2);  //把拿到的图片放进去  最后两个属性是图片的大小
                            ctx.setFillStyle('#fff');  //水印的颜色
                            ctx.setFontSize(16);   //水印的大小
                            ctx.fillText(address, 20, result.height / 2 - 10);   //水印名称放进去  后面是水印的位置
                            //注意：设置文字大小必须放在填充文字之前，否则不生效
                            
                            ctx.draw(false, function() {
                                setTimeout(function() {
                                    //绘画完成回调
                                    
                                    uni.canvasToTempFilePath({  //生成图片
                                        quality: 1,
                                        fileType: 'jpg',
                                        canvasId: 'firstCanvas',
                                        success: function(ress) {
                                            
                                            // console.log(ress.tempFilePath); //ress.tempFilePath就是带有水印的图片路径
                                            
                                            let data = {
                                                file: ress.tempFilePath, //你要传的临时文件
                                                type: 1
                                            };
                                            uploadImages(data).then(ress => {
                                                if (ress.code == 200) {
                                                    if(index==1){
                                                        that.jsonData.idCarImageFront=ress.body
                                                    }else if(index==2){
                                                        that.jsonData.idCarImageOpposite=ress.body
                                                    }
                                                }
                                            });
                                        }
                                    });
                                }, 600);
                            });
                        }
                    });
                    // 
                }
            });
        },