canvas二维码本地保存到手机相册的解决方案

2024-02-18 22:30:38

前言

小程序中经常需要用到canvas绘制海报，而海报中往往包含二维码。如果需要将二维码保存到手机相册，可以使用以下两种方法：

一、使用原生canvas画图

原生canvas画图的方法相对简单，但需要开发者自己编写代码来实现。

创建canvas元素

首先，需要在小程序页面中创建canvas元素。可以通过在.wxml文件中添加以下代码来创建canvas元素：

<canvas id="canvas" style="width: 300px; height: 300px;" canvas-id="{{canvasId}}"></canvas>

其中，canvas-id是canvas元素的ID，width和height是canvas元素的宽高。

获取canvas上下文

接下来，需要获取canvas的上下文对象。可以通过在.js文件中添加以下代码来获取canvas的上下文对象：

const canvas = wx.createCanvasContext(canvasId);

其中，canvasId是canvas元素的ID。

绘制二维码

获取canvas上下文对象后，就可以使用canvas提供的API来绘制二维码了。可以使用以下代码来绘制二维码：

canvas.drawImage(qrcodeImg, 0, 0, 100, 100);

其中，qrcodeImg是二维码图片的路径，0, 0是二维码图片在canvas中的位置，100, 100是二维码图片的大小。

将canvas保存到手机相册

绘制好二维码后，就可以将canvas保存到手机相册了。可以使用以下代码来将canvas保存到手机相册：

wx.canvasToTempFilePath({
  canvasId: canvasId,
  success: function(res) {
    wx.saveImageToPhotosAlbum({
      filePath: res.tempFilePath,
      success: function(res) {
        console.log('二维码保存成功');
      },
      fail: function(res) {
        console.log('二维码保存失败');
      }
    });
  },
  fail: function(res) {
    console.log('canvas导出失败');
  }
});

其中，canvasId是canvas元素的ID，success和fail是回调函数。

二、使用canvas-nest-component组件

使用canvas-nest-component组件的方法相对简单，不需要开发者自己编写代码来实现。

安装canvas-nest-component组件

首先，需要在小程序中安装canvas-nest-component组件。可以通过在.json文件中添加以下代码来安装canvas-nest-component组件：

"usingComponents": {
  "canvas-nest-component": "@vant/weapp/canvas-nest-component/index"
}

在页面中使用canvas-nest-component组件

安装canvas-nest-component组件后，就可以在小程序页面中使用canvas-nest-component组件了。可以通过在.wxml文件中添加以下代码来使用canvas-nest-component组件：

<canvas-nest-component id="canvas" canvas-id="{{canvasId}}" bind:error="canvasError" bind:success="canvasSuccess"></canvas-nest-component>

其中，canvasId是canvas-nest-component组件的ID，bind:error是canvas-nest-component组件的错误事件处理函数，bind:success是canvas-nest-component组件的成功事件处理函数。

在页面中使用canvas-nest-component组件绘制二维码

在页面中使用canvas-nest-component组件绘制二维码的方法与使用原生canvas画图的方法类似。可以使用以下代码来使用canvas-nest-component组件绘制二维码：

this.setData({
  qrcodeImg: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
});

其中，qrcodeImg是二维码图片的路径。