canvas实现将小程序码，海报图合成一张图片并保存至相册

需求说明

一张海报底图，将生成的小程序码贴在海报底图的相应位置，生成相应的图片，并且保存到相册。页面是长下面这样子的

海报底图是固定的，小程序码是随机生成的
页面底部有两个按钮：保存图片，分享好友

用到的技术

小程序
canvas

实现

• 首先看一下整个生成的步骤

1. 进入页面调用生成小程序码的接口，接口返回图片的base64格式，将base64格式的小程序码图片展示到页面上。
2. 保存图片：利用canvas画图，将海报底图和小程序码图合并成一张图片，并保存在相册中
3. 分享给好友：利用小程序自带的分享功能，调用分享给好友

• 保存图片的实现

1. 使用技术：小程序的canvas
2. 具体实现方式：使用canvas画图的方式，1）先画出底图，2）将小程序码图片画到底图上去
3. 重要！！！注意：canvas在页面上的位置，需要特殊处理一下。避免canvas画图显示到页面中

position: absolute;
left: 10000rpx;
top: 10000rpx;

4. 上代码：
   1）重要！！！需要注意的是如果海报的底图是网络图片，需要使用微信的api转成临时文件，canvas才可以使用将此图片画作底图。
   2）重要！！！小程序码的base64图片格式，也需要转成临时文件，才可以使用canvas画在海报底图上。

//  wxml文件
<canvas canvas-id="shareCanvas" style="width: 295px;height: 590px" />

// js
 // 保存图片
  saveImage(postImg, miniImg) {
    // 为了防止多次点击，如果正在保存图片中，则不执行保存图片的操作
    if (!this.data.isDoCanvas) {
      // 网络图片需要下载，转成临时文件再画图
      wx.downloadFile({
        url: postImg,
        success: postImage=> {
          // 如果没有小程序码，直接存储文件 否则开始画图
          if (!miniImg) {
            // 将合成的图片保存到相册中
            this.saveImageToPhotos(postImage.tempFilePath)
          } else {
            // 开始画图   shareCanvas是wxml上canvas标签的id属性值
            const ctx = wx.createCanvasContext('shareCanvas')
            // drawImage方法传入的参数，可以参考官方文档
            ctx.drawImage(postImage.tempFilePath, 0, 0, 295, 590)
            // 划重点：小程序码的base64 转成临时文件，否则在真机上无法保存图片
            this.base64src(miniImg, miniImage=> {
              this.roundImage(ctx, 4, miniImage, 114, 550, 66, 66)
              ctx.draw(true, () => {
                wx.canvasToTempFilePath({
                  canvasId: 'shareCanvas',
                  success: response => {
                    // 将合成的图片保存到相册中
                    this.saveImageToPhotos(response.tempFilePath)
                  }
                })
              })
            })
          }
        }
      })
    } else {
      wx.downloadFile({
        url: this.data.postImg,
        success: res => {
          this.saveImageToPhotos(res.tempFilePath)
        }
      })
    }
  },

 // 绘制圆角图片
  roundImage(context, r, path, dx, dy, dWidth, dHeight, c) {
    context.save()
    this.roundRect(context, dx, dy, dWidth, dHeight, r, c)
    context.fill()
    context.clip()
    context.drawImage(path, dx, dy, dWidth, dHeight)
    context.restore()
  },

// base64图片 转成临时文件
  base64src(base64data, cb) {
    let fsm = wx.getFileSystemManager()
    let FILE_BASE_NAME = 'tmp_base64src' //自定义文件名
    const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || []
    if (!format) {
      return (new Error('ERROR_BASE64SRC_PARSE'))
    }
    const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`
    const buffer = wx.base64ToArrayBuffer(bodyData)
    fsm.writeFile({
      filePath,
      data: buffer,
      encoding: 'binary',
      success() {
        cb(filePath)
      },
      fail() {
        return (new Error('ERROR_BASE64SRC_WRITE'))
      }
    })
  },

// 保存照片到相册中
  saveImageToPhotos(file) {
    wx.saveImageToPhotosAlbum({
      filePath: file,
      success: () => {
        wx.showToast({
          icon: 'none',
          title: '保存成功',
          duration: 1500
        })
      },
      fail: () => {
        wx.showToast({
          icon: 'none',
          title: '保存失败，请稍后重试',
          duration: 1500
        })
      }
    })
  },

• 分享给好友的实现

1. 根据小程序的官方api实现分享给好友
2. button标签，open-type属性设置为share值，点击button的时候就会自动调用onShareAppMessage方法
3. 上代码

// wxml 文件的标签，
<button class="btn btn-right" open-type="share">分享给好友</button>

// js文件
// 分享
  onShareAppMessage() {
    return {
      title: '填写你的分享标题',
      imageUrl: '填写你的分享图片',
      path: '填写你的分享路径'
      success: () => {
        // 转发成功之后的回调
        wx.showToast({
          title: '转发成功',
          duration: 1500
        })
      },
      fail: () => {
        wx.showToast({
          title: '转发失败',
          duration: 1500
        })
      }
    }
  }

结束语

目前页面上的功能都已实现，如果有问题的小伙伴，可以在下方留言哦，我每天都会查看哒！感谢您的支持。