小程序 上传图片加水印（图片和文字）

如图，图片上传的时候添加水印，水印可以为图片或文字

元素中添加canvas,画布放在屏幕外，避免在屏幕内遮挡

<view class="v-uploader" id="van-uploader">
  <van-uploader class="custom-style" previewSize="156rpx" maxCount="{{maxCount}}" fileList="{{fileList}}" multiple="{{true}}" deletable="{{deletable}}" bind:after-read="afterRead" bind:delete="delFile" bind:click-preview="clickPrevFile"></van-uploader>
</view>
<canvas id="mycanvas" type="2d" style="width: {{canvasWidthValue}}px;height:{{canvasHeightValue}}px;position:fixed;left:9000px"></canvas>

js

    afterRead(file){
      let newDate = new Date()
      let year = newDate.getFullYear() //年
      let month = newDate.getMonth() + 1 //月
      let day = newDate.getDate() //日
      var hour = newDate.getHours()
      var minute = newDate.getMinutes()
      var second = newDate.getSeconds()
      let roleNameInfo = year + '年' + month + '月' + day + '日 '+ hour+':'+minute +':' + second
      this.setData({
        currentDate:roleNameInfo
      })
      const currentTime = this.data.currentDate; //时间
      let that = this
      let files = file.detail.file;
      let promiseArr = []
      files = files.forEach((file,index)=>{
        promiseArr.push(new Promise((reslove,reject) => {
        // 获取图片宽度和高度
        wx.getImageInfo({
            src: file.path?file.path:(file.tempFilePath?file.tempFilePath:''),
            success(res) {
              console.log('成功',res);
              file.width = res.width;
              file.height = res.height;
              that.setData({
                  canvasWidthValue: res.width,
                  canvasHeightValue: res.height, 
              })
              file.path = res.path;
              // 将时间信息添加到文件对象中
              file.currentTime = currentTime;
              // 创建一个临时canvas对象  query
              const query = that.createSelectorQuery()
              query.select('#mycanvas').fields({
                      node: true,
                      size: true
                  })
                  .exec(res => {
                      const canvas = res[0].node
                      const ctx = canvas.getContext('2d');
                      const img = canvas.createImage()
                      img.src = file.path
                      img.onload = function () {
                          //设置画布到校绘制原图到canvas中 
                          ctx.canvas.width = file.width
                          ctx.canvas.height = file.height
                          const water_img = canvas.createImage()
                          water_img.src = 'https://www.youkuayun.com/oss/wx/1710937452431/P2E7QKTMaZsSJCjfDSETF3QBP8DMpJr6.png'
                          water_img.onload = function(){
                            ctx.drawImage(img, 0, 0, file.width, file.height)
                            ctx.drawImage(water_img, 0, 0, 100, 100) // 绘制图像到原有画布，也就是图片拼接
                            // 设置水印字体大小、颜色和位置 
                            ctx.font = "36px arial";
                            ctx.fillStyle = "#fff";
                            ctx.textAlign = "right";
                            ctx.textBaseline = "bottom"; 
                            // 绘制时间信息到canvas中
                            ctx.fillText(currentTime, file.width-20, file.height-10);  
                            ctx.fillText('logo', file.width-20, file.height-50,file.width);  
                            setTimeout(() => { 
                                // 将canvas转换成图片，并将其添加到文件对象中
                                wx.canvasToTempFilePath({  
                                    canvas: canvas,
                                    success: (res) => {
                                        file.path = res.tempFilePath;
                                        let fileList = {
                                          files:[res.tempFilePath]
                                        }
                                        api.uploadFile({
                                          data: fileList,
                                          success(res) {
                                            wx.hideLoading()
                                            console.log("文件上传成功............")
                                            let url = that.data.fileDomian + res.fileName //地址
                                            let name = res.fileName
                                            let size = res.size; //大小
                                            reslove({url,name,size});
                                          },
                                          fail(res) {
                                            wx.hideLoading();
                                            wx.showToast({
                                              title: '上传失败',
                                              icon: 'none'
                                            })
                                            console.log('文件上传失败............');
                                          }
                                        })
                                    },
                                    fail(res) {
                                        console.error('失败', res)
                                    }
                                });
                            }, 800);
                          }
                      }
                  })
            }
        });
        }))
      })
      Promise.all(promiseArr).then(res => { //等数组都做完后做then方法
        wx.hideLoading();
        console.log("图片上传完成后再执行")
        console.log(res)
        let files = JSON.parse(JSON.stringify(this.properties.fileList))
        files.push(...res)
        this.triggerEvent('fileUpload',{ifSys:this.properties.ifSys,fileName:this.properties.fileName,files:files})
      })
    },

参考http://t.csdnimg.cn/Py48U   加文字水印

http://t.csdnimg.cn/68QEH    加图片