小程序画布插入证件照换低并保存图片到本地相册(注意必须保证canvas绘制完成才导出图片)

这里是将证件照图片写死，背景颜色写死，尺寸写死，大家可按需进行改进

首先最注意的地方是保存图片时，必须保证canvas绘制完成

官网教程(最好是配合来看)

第一步：在 WXML 中添加 canvas 组件

wxml 文件

<view class="border" style="margin: 75rpx">
  <canvas id="myCanvas" type="2d" style="border: 1px solid; width: 600rpx; height: 840rpx;"/>
</view>

• 首先需要在 WXML 中添加 canvas 组件。

• 指定 id=“myCanvas” 唯一标识一个 canvas，用于后续获取 Canvas 对象。

• 指定 type 用于定义画布类型，本例子使用 type=“2d” 示例。

效果图

第二步：获取 Canvas 对象和渲染上下文

后面的代码我都是放在生命周期函数onLoad里面，你们可以按需分别放在不同事件里面，因为我只是做过简单的栗子

wx.createSelectorQuery()
    .select('#myCanvas') // 在 WXML 中填入的 id
    .fields({ node: true, size: true })
    .exec((res) => {
        // Canvas 对象
        const canvas = res[0].node
        // 渲染上下文
        const ctx = canvas.getContext('2d')
    })

• 通过 SelectorQuery 选择上一步的 canvas，可以获取到 Canvas 对象。

• 再通过 Canvas.getContext，我们可以获取到 渲染上下文 RenderingContext。

• 后续的画布操作与渲染操作，都需要通过这两个对象来实现。

第三步：初始化 Canvas

wx.createSelectorQuery()
    .select('#myCanvas') // 在 WXML 中填入的 id
    .fields({ node: true, size: true })
    .exec((res) => {
        // Canvas 对象
        const canvas = res[0].node
        // 渲染上下文
        const ctx = canvas.getContext('2d')

        // Canvas 画布的实际绘制宽高
        const width = res[0].width
        const height = res[0].height

        // 初始化画布大小
        const dpr = wx.getWindowInfo().pixelRatio
        canvas.width = width * dpr
        canvas.height = height * dpr
        ctx.scale(dpr, dpr)
    })

• canvas 的宽高分为渲染宽高和逻辑宽高，具体看官网的教程（上面那个链接）

第四步：绘制背景色

		// ...接上面的代码...
        // 背景颜色
        ctx.fillStyle = 'rgba(0, 0, 200)'
        ctx.fillRect(0, 0, width, height)

效果图

第五步：绘制图片

// ...接上面的代码...
// 图片对象
const image = canvas.createImage()
// 设置图片src
image.src = 'https://i.postimg.cc/s2d5kHG3/test-2.png'
// 图片加载完成回调
image.onload = () => {
    // 将图片绘制到 canvas 上
    ctx.drawImage(image, 0, 0)
}

效果图

最后一步保存画布的内容到本地

在刚刚的image.onload下添加如下代码

// 图片加载完成回调
        image.onload = () => {
          // 将图片绘制到 canvas 上
          ctx.drawImage(image, 0, 0, width, height)
          console.log('绘制完成')
          // 生成图片
          wx.canvasToTempFilePath({
            // 放在image.onload 里面确保图片绘制完成
            canvas: canvas,
            success: res => {
              // 生成的图片临时文件路径
              const tempFilePath = res.tempFilePath
              wx.saveImageToPhotosAlbum({
                filePath: tempFilePath,
                success(res) {
                  console.log('成功保存到系统相册')
                }
              })
            }
          })
        }

这一步是最关键的，（本人也迷茫半天，因为我将canvasToTempFilePath放在外面，只输出一张纯蓝色的图片，最后在微信开发社区发现是画布绘制还没有完成，我就保存图片到本地导致的）
关键点：将canvasToTempFilePath放在 image.onload回调里面。确保插入的图片已经绘制进画布