微信小程序-离屏canvas给照片添加水印

个人使用中遇到的，纯JS，可以全局使用，个人见解，已经封装好了，可以直接使用

因为是uni开发的，所以部分API是uni和wx混用的

就是不知道怎么在离屏的canvas中绘制文字，有知道的兄弟告知一下🤞🤞🤞

// 微信小程序离屏canvas给照片添加水印
export function addWatermark(imgPath) {    // imgPath为图片路径
  return new Promise((newResolve) => {
    //获取手机型号，判断系统是否为IOS，IOS系统输出canvas画好的图片不支持canvasToTempFilePath方法，需要使用writeFile方法
    const k = wx.getSystemInfoSync().brand
    // 用时间戳拼接下方生成的临时路径，防止重复
    const time = new Date().getTime();

    wx.getImageInfo({
      src: imgPath,
      success: function (res) {
        const canvas = wx.createOffscreenCanvas({ type: '2d', width: res.width, height: res.height })
        const context = canvas.getContext('2d')
        let image = canvas.createImage()
        var myCan = new Promise(resolve => {
          image.src = res.path // 要加载的图片 url
          image.onload = function () {
            resolve()
          }
        })
        // 水印图片，后期更改水印需更改图片路径及宽高
        // 尝试使用canvas将文字画上去，但是没成功，所以将透明的水印图片作为替代方案画上去
        let image2 = canvas.createImage()
        var myCan2 = new Promise(resolve => {
          image2.onload = function () {
            resolve()
          }
          image2.src = require('@/myPackageA/static/banner/watermark.png') // 要加载的图片 url

        })
        let img2w = res.width > 600 ? 600 : res.width / 2 //水印图片的宽度和高度
        let img2x = res.width / 2 - img2w / 2  //水印图片的x坐标
        let img2y = res.height / 2 - img2w / 2   //水印图片的y坐标


        Promise.all([myCan, myCan2]).then(() => {
          // 把图片画到离屏 canvas 上
          context.clearRect(0, 0, res.width, res.height)  // 清空画布
          context.drawImage(image, 0, 0, res.width, res.height)
          context.drawImage(image2, img2x, img2y, img2w, img2w)


          if (k == 'iPhone') {
            let b64Data = context.canvas.toDataURL();  // 转为base64
            const filePath = `${uni.env.USER_DATA_PATH}/temp_image_${time}.png`;    // 创建空文件的临时路径
            let buffer = uni.base64ToArrayBuffer(b64Data.substring(b64Data.indexOf(',') + 1));   // base64转为buffer对象
            // 写入临时文件
            uni.getFileSystemManager().writeFile({
              filePath,  // 临时路径写入文件
              data: buffer,
              encoding: 'utf8',
              success: res => {
                // 这里遇到一个坑，猜测是因为缓存的问题，第一次加载本地图片正常，但第二次加载本地图片时，图片不显示，image的onload事件也不触发，所以这里先将image2的src置空，再重新赋值
                image2.src = ''
                newResolve(filePath)   //将写入数据的临时路径返回
              },
              fail: (err) => {
                image2.src = ''
                console.log('err', err)
              }
            });
          } else {
            wx.canvasToTempFilePath({
              canvas,
              success: res => {
                image2.src = ''
                newResolve(res.tempFilePath)
              }, fail: err => {
                image2.src = ''
                console.log('err', err)
              }
            })
          }
        })
      }
    })
  })
}