uni-app 微信小程序、app、h5端上传图片生成水印

我爱模板网在用uni-app做一个维修app时，里面有个功能：维修完，要拍摄现场照片，打上水印，进行上传。百度了下，找到了下面的代码，进行整理后成功实现！
wxml文件

<!-- 拍照上传图片带水印 -->
<camera device-position="front" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" @tap="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" :src="src"></image>
<canvas class='canvas' :style="canvasStyle" canvas-id="firstCanvas"></canvas>

js文件数据区：

data() {
    return {
        socketOpen: false,
        src:'',
        canvasStyle:{}
    }
}

js文件方法区：

takePhoto() {
    const ctx = uni.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.src=res.tempImagePath;
        let that = this;
        uni.getImageInfo({
          src: res.tempImagePath,
          success: (ress) => {
            let date = "水印内容";    /** 作为水印 */
            let ctx = uni.createCanvasContext('firstCanvas');    /** 创建画布 */
            let textToWidth = ress.width / 3 * 0.5;  /**这里设置的是水印位置*/
            let textToHeight = ress.height / 3 * 0.9;
            that.canvasStyle=`{width:${ress}.width/3px;height:${ress}.height/3px}`;                        
            //将图片src放到cancas内，宽高为图片大小
            ctx.drawImage(res.tempImagePath, 0, 0, ress.width / 3, ress.height / 3)
            //将声明的时间放入canvas
            ctx.setFontSize(14) //注意：设置文字大小必须放在填充文字之前，否则不生效
            ctx.setFillStyle('blue')
            ctx.fillText(date, textToWidth, textToHeight)    //水印内容，位置
            // ctx.strokeText(date, ress.width, ress.height)
            uni.showLoading({
              title: '制作水印中...',
            })
            ctx.draw(false, () => {//开始制作
              setTimeout(() => {//使用定时是因为制作水印需要时间，设置定时才不会出bug
                uni.canvasToTempFilePath({//将画布中内容转成图片，即水印与图片合成
                  canvasId: 'firstCanvas',
                  success: (res) => {
                    uni.hideLoading()
                    uni.saveImageToPhotosAlbum({//保存到手机
                      filePath: res.tempFilePath,
                      success(res) {
                        console.log('1')
                      }
                    })
                  }
                })
              }, 500)
            })
          }
        })
      }
    })
  }

上面的代码没有上传功能，而且图片的裁剪比较麻烦，下面是进行了修改后使用到了项目中的代码：

<view class="add-img">
    <view class="label">添加图片</view>
    <view class="imgs flex flex-middle">
        <image :src="item" v-for="(item,index) in fileList" :key="index"></image>
        <image src="../../static/img/uploadimg.png" @click="chooseImg"></image>
    </view>
</view>
<!--因为要用到canvas，而项目中不能显示canvas，所以对它进行了隐藏-->
<view style="width: 0; height: 0; overflow: hidden; visibility: hidden;">
    <canvas class='canvas' :style="{'width': canvasWdith+'px', 'height': canvasHeight+'px'}" canvas-id="firstCanvas"></canvas>
</view>

<script>
    export default {
    components: {
    },
    data() {
        return {
            fileList:[],
            canvasWdith:0,
            canvasHeight:0
        };
    },
    onLoad(options) {
    },
    methods: {
        chooseImg(){
            var that = this;
            uni.chooseImage({
                count: 1,
                sizeType: ['compressed'],
                sourceType: ['album','camera'],
                success: function (res) {
                    uni.getImageInfo({
                        src: res.tempFilePaths[0],
                        success: (ress) => {
                            let ctx = uni.createCanvasContext('firstCanvas');
                            let date = "水印内容水印内容水印内容水印内";
                            let textWidth = ctx.measureText(date).width;
                            let imgWidth = ress.width/4;
                            let imgHeight = ress.height/4;
                            that.canvasWdith=imgWidth;
                            that.canvasHeight=imgHeight;
                            that.$nextTick(() => {
                                //将图片src放到cancas内，宽高为图片大小
                                ctx.drawImage(res.tempFilePaths[0], 0, 0, imgWidth, imgHeight);
                                //将声明的时间放入canvas
                                ctx.setFontSize(14) //注意：设置文字大小必须放在填充文字之前，否则不生效
                                ctx.setFillStyle('white')
                                ctx.fillText(date, 0, imgHeight-20)    //水印内容，位置
                                // ctx.strokeText(date, ress.width, ress.height)
                                uni.showLoading({
                                    title: '制作水印中...',
                                })
                                ctx.draw(false, () => {//开始制作
                                    setTimeout(() => {//使用定时是因为制作水印需要时间，设置定时才不会出bug
                                        uni.canvasToTempFilePath({//将画布中内容转成图片，即水印与图片合成
                                            canvasId: 'firstCanvas',
                                            success: (res) => {
                                                uni.hideLoading();
                                                uni.showToast({
                                                    duration: 1000,
                                                    title: '上传中...',
                                                    icon: 'loading'
                                                })
                                                uni.uploadFile({
                                                    url: 'http://www.5imoban.net/upload',
                                                    filePath: res.tempFilePath,
                                                    name: 'file',
                                                    success: (res) => {
                                                        that.fileList.push(r.data);
                                                        uni.hideToast()
                                                    },
                                                    fail: function(xhr, type) {
                                                        console.log(JSON.stringify(xhr));
                                                        func.msg('上传失败！');
                                                        uni.hideToast()
                                                    }
                                                })
                                            }
                                        })
                                    }, 500)
                                })
                            })
                        }
                    })
                }
            });
        },
    },
}
</script>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！