微信小程序canvas绘图批量生成图片到文件夹

Question

微信小程序canvas导入云数据库数据后，绘制文字信息，生成若干个名片。然后批量保存图片到本地文件夹。如何实现

Answer 1

步骤1：获取云数据库数据

// 获取数据库引用
const db = wx.cloud.database();
// 查询数据
db.collection('businessCards').get({
  success: res => {
    // 这里的res.data是包含所有名片数据的数组
    this.drawCards(res.data);
  },
  fail: err => {
    console.error(err);
  }
});

步骤2：绘制Canvas

drawCards: function(data) {
  data.forEach((item, index) => {
    // 创建一个Promise数组，用于处理异步的Canvas绘制和保存操作
    promises.push(new Promise((resolve, reject) => {
      const ctx = wx.createCanvasContext(`cardCanvas${index}`);
      
      // 绘制背景、文字等
      ctx.setFillStyle('#ffffff');
      ctx.fillRect(0, 0, 300, 200); // 假设名片大小为300x200
      ctx.setFillStyle('#000000');
      ctx.setFontSize(14);
      ctx.fillText(item.name, 10, 20); // 假设item.name是姓名
      ctx.fillText(item.title, 10, 40); // 假设item.title是职位
      // ...绘制其他信息

      // 绘制完成后执行draw方法
      ctx.draw(false, () => {
        // 延时保存，确保绘制完成
        setTimeout(() => {
          this.saveCardImage(`cardCanvas${index}`, resolve, reject);
        }, 200);
      });
    }));
  });
  
  // 等待所有名片绘制并保存完毕
  Promise.all(promises).then(() => {
    console.log('所有名片保存完成');
  });
}

步骤3：保存Canvas为图片

saveCardImage: function(canvasId, resolve, reject) {
  wx.canvasToTempFilePath({
    canvasId: canvasId,
    success: res => {
      // 将临时文件保存到相册
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: () => {
          resolve(); // 保存成功
        },
        fail: err => {
          reject(err); // 保存失败
        }
      });
    },
    fail: err => {
      reject(err);
    }
  }, this);
}