uniapp小程序上传照片加水印_uniapp上传图片带位置水印-优快云博客

本文链接：https://blog.youkuaiyun.com/lijiajun98/article/details/131012118

文章描述了一个在HTML页面中使用uni-app的API进行图片选择、缩放、添加水印以及将处理后的图片转换为临时文件路径并上传的过程。具体涉及uni.chooseImage选择图片，getImageInfo获取图片信息，createCanvasContext创建画布，drawImage绘制图片，fillText添加文字水印，以及canvasToTempFilePath生成带水印的图片文件并调用uploadImages函数进行上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html 页面

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);
                           });
                       }
                   });
                   //
               }
           });
       },