微信小程序如何使用canvas二维码保存至手机相册

当我们在做微信小程序开发的时候，可能会需要用到一些画图或者生成二维码的功能，这时候就需要使用canvas了。而同时，我们可能需要将生成的二维码保存至手机相册，下面就讲解如何在微信小程序中使用canvas生成二维码并保存至手机相册。

步骤一：引入QRCode.js库

在小程序的代码中，我们需要引入QRCode.js库，它可以帮助我们生成二维码。

import QRCode from '../../utils/qrcode.js'

步骤二：生成二维码

接下来，我们就可以使用QRCode库来生成二维码，我们可以在onLoad函数中，通过页面的query参数获取到需要生成二维码的信息，然后将其绘制在canvas上。

onLoad: function(options) {
  var content = options.content
  var size = options.size || 200

  //获取 canvas 绘图上下文
  var ctx = wx.createCanvasContext('QRCode', this)

  //使用QRCode库生成二维码
  QRCode.api.draw(content, ctx, size, size)
}

步骤三：将canvas上的图片保存至手机相册

最后，我们需要将canvas上的图片保存至手机相册中。需要注意，在小程序中要保存图片需要将canvas转换为临时文件，然后在调用API进行保存。

saveToAlbum: function() {
  wx.canvasToTempFilePath({
    canvasId: 'QRCode',
    fileType: 'png',
    success: function(res) {
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: function(res) {
          wx.showToast({
            title: '保存成功',
            icon: 'success',
            duration: 2000
          })
        },
        fail: function(res) {
          wx.showToast({
            title: '保存失败',
            icon: 'none',
            duration: 2000
          })
        }
      })
    }
  })
}

这段代码将canvas转换为png格式的临时文件，然后调用wx.saveImageToPhotosAlbum API将图片保存至手机相册中。当保存成功或者失败时，都会弹出Toast提醒用户。

示例一：生成带logo的二维码

如果我们需要生成带logo的二维码，可以在使用QRCode库生成二维码之后，再将logo绘制到canvas上即可。

QRCode.api.draw(content, ctx, size, size, {
  logo: '/images/logo.png',
  logoWidth: 40,
  logoHeight: 40,
  logoBorderRadius: 8,
})

示例二：生成彩色二维码

如果我们需要生成彩色的二维码，可以在使用QRCode库生成二维码之后，修改canvas上的像素点颜色即可。

var imageData = ctx.getImageData(0, 0, size, size)
var pixels = imageData.data
for (var i = 0; i < pixels.length; i += 4) {
  var r = pixels[i]
  var g = pixels[i + 1]
  var b = pixels[i + 2]
  var a = pixels[i + 3]
  if (r < 128) {
    pixels[i] = 255
    pixels[i + 1] = 0
    pixels[i + 2] = 0
  }
}
ctx.putImageData(imageData, 0, 0)

这段代码将canvas上的所有像素点颜色都修改为红色，你可以根据需要修改为其他颜色。

到此为止，我们就可以使用canvas在微信小程序中生成二维码，并将其保存至手机相册。