微信小程序拍照上传加水印

camera.wxml

拍照
预览

camera.js

takePhoto() {
 const ctx = wx.createCameraContext()
 ctx.takePhoto({
   quality: 'high',
   success: (res) => {
     this.setData({
        src: res.tempImagePath
     });
     let that = this;
     wx.getImageInfo({
       src: res.tempImagePath,
       success:(ress)=>{
         let date = "水印内容";    //作为水印
         let ctx = wx.createCanvasContext('firstCanvas')    //创建画布
         let textToWidth = ress.width / 3 * 0.5  //这里设置的是水印位置
         let textToHeight = ress.height / 3 * 0.9
         that.setData({
           canvasHeight: ress.height/3,  //画布大小，除以三是变小处理快，自行修改
           canvasWidth: ress.width/3
         })
         //将图片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)
         wx.showLoading({
           title: '制作水印中...',
         })
         ctx.draw(false, () => {//开始制作
           setTimeout(() => {//使用定时是因为制作水印需要时间，设置定时才不会出bug
             wx.canvasToTempFilePath({//将画布中内容转成图片，即水印与图片合成
               canvasId: 'firstCanvas',
               success: (res) => {
                 wx.hideLoading()
                 wx.saveImageToPhotosAlbum({//保存到手机
                    filePath: res.tempFilePath,
                    success(res) {
                      console.log('1')
                    }
                 })
               }
             })
           }, 500)
         })
       }
     })
   }
 })
}