微信小程序canvas绘制表格并保存到相册，支持退出重进继续绘制

{"title":"const app = getApp() Page({ data: { disabled: false, canvasId: 'myCanvas', clickCount: 0, maxClickCount: 11, tableData:[], bh:'', mc:'', zt:'', dw:'', date: '', arr1:'', arr2:'', array1:['新鲜', '腐烂','干燥', '潮湿', '包装完好','包装破损'], array2:['重金属GB5009.15等','农残GB23200.113等','农残NY/T 761等'], index:0, sum:0, row:[], y:140 }, bindPickerChange1: function (e) { const index = e.detail.value; let array1 = this.data.array1; this.setData({ index, arr1: array1[index] }); }, bindPickerChange2: function (e) { const sum = e.detail.value; let array2 = this.data.array2; this.setData({ sum, arr2: array2[sum] }); }, bindDateChange: function(event) { this.setData({ date: event.detail.value }); }, inputbh(event){ this.setData({ bh:event.detail.value }); }, inputmc(event){ this.setData({ mc:event.detail.value }); }, inputzt(event){ this.setData({ zt:event.detail.value }); }, inputdw(event){ this.setData({ dw:event.detail.value }); }, onReady() { const ctx = wx.createCanvasContext('myCanvas'); this.ctx = ctx; this.setData({ rows: []}); this.drawTable(); }, drawTable() { const { bh, mc, arr1, dw, date, arr2, zt} = this.data; // 清空画布 this.ctx.fillStyle = '#FFFFFF' this.ctx.clearRect(0, 0, 1200, 848); this.ctx.fillRect(0, 0, 1200, 848); // 设置字体样式 this.ctx.fillStyle = '#000'; this.ctx.setTextAlign('center'); this.ctx.setTextBaseline('middle'); let y = this.data.y || 100 ; this.ctx.font = "bold 30px 黑体"; this.ctx.fillText('样 品 登 记 表', 640, 90); this.ctx.font = "black 15px Times New Roman"; this.ctx.fillText('GHNJ/TR-26', 160, 110); this.ctx.fillText('第 页 共 页', 990, 110); const points = [ { x: 60 , y: 130, width: 90, text: '样品编号' }, { x: 150, y: 130, width: 70, text: '样品名称' }, { x: 220, y: 130, width: 55, text: '样品状态' }, { x: 275, y: 130, width: 90, text: '抽样编号' }, { x: 365, y: 130, width: 210, text: '被检单位' }, { x: 575, y: 130, width: 70, text: '收样日期' }, { x: 645, y: 130, width: 65, text: '样品数量' }, { x: 710, y: 130, width: 120, text: '检查项目及依据' }, { x: 830, y: 130, width: 60, text: '送样人' }, { x: 890, y: 130, width: 60, text: '接样人' }, { x: 950, y: 130, width: 80, text: '结果返回日期' }, { x: 1030, y: 130, width: 65, text: '报告编号' }, { x: 1095, y: 130, width: 65, text: '备注' } ]; for (let i = 0; i < points.length; i++) { const point = points[i]; const text = point.text; this.ctx.font = "black 13px 宋体"; this.ctx.strokeRect(point.x, point.y, point.width, 60); this.ctx.fillText(text, point.x + point.width / 2, point.y + 30); } // 添加新内容到 rows 数组 const newRow = [ { x: 60, y, width: 90, text: "G-2023-"+bh }, { x: 150, y, width: 70, text: mc }, { x: 220, y, width: 55, text: arr1 }, { x: 275, y, width: 90, text: '' }, { x: 365, y, width: 210, text: dw }, { x: 575, y, width: 70, text: date }, { x: 645, y, width: 65, text: '3 Kg' }, { x: 710, y, width: 120, text: arr2 }, { x: 830, y, width: 60, text: '' }, { x: 890, y, width: 60, text: zt }, { x: 950, y, width: 80, text: '' }, { x: 1030, y, width: 65, text: '' }, { x: 1095, y, width: 65, text: '' } ]; this.setData({ rows: [...this.data.rows, newRow] }); // 绘制 rows 数组中的内容 for (let i = 1; i < this.data.rows.length; i++) { const row = this.data.rows[i]; for (let j = 0; j < row.length; j++) { const point = row[j]; const text = point.text; // 只绘制在屏幕内的内容 this.ctx.font = "black 12px 行书"; this.ctx.strokeRect(point.x, point.y, point.width, 50); this.ctx.fillText(text, point.x + point.width / 2, point.y + 25); } } y += 50 this.setData({y}); this.ctx.draw(); //限制提交次数 if (this.data.clickCount < this.data.maxClickCount) { this.setData({ clickCount: this.data.clickCount + 1 }); } if (this.data.clickCount === this.data.maxClickCount) { this.setData({ disabled: true }); wx.showToast({ title: '本页已满，请保存数据', icon: 'none', duration: 2000 }); } }, saveImg(){ wx.canvasToTempFilePath({ x: 0, y: 0, width: 1200, height: 848, canvasId: 'myCanvas', success: (res) => { // 将临时文件路径保存到手机本地 wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: () => { // 在这里可以处理保存成功的逻辑 wx.showToast({ title: '保存成功,请点击下一页', icon: 'none', duration: 2000 }); }, fail: (err) => { // 在这里可以处理保存失败的逻辑 console.error(err); } }); }, fail: (err) => { // 在这里可以处理生成图片失败的逻辑 console.error(err); } }, this); }, refreshPage: function () { wx.showModal({ title: '提示', content: '请确认是否已保存当前数据', success(res) { if (res.confirm) { wx.reLaunch({ url: '/pages/jiance/jiance' }) } else if (res.cancel) { console.log('用户点击取消') } } }) }, })微信小程序canvas绘制图片退出重进后继续上次绘制内容内容：在小程序的Page生命周期函数中，可以使用onReady函数来绘制canvas，并在canvas中绘制内容。在drawTable函数中，可以根据data中的数据绘制表格内容。在saveImg函数中，可以将canvas内容保存为图片并保存到手机相册。在refreshPage函数中，可以弹出确认框，确认是否保存当前数据并重新加载页面。

为了在退出小程序后再次进入时能够继续上次绘制的内容，可以将绘制的数据保存到小程序的缓存中。可以在onReady函数中先从缓存中读取数据，如果有数据，则使用缓存中的数据进行绘制。

以下是将绘制的数据保存到缓存中的示例代码：

onReady() {
  const ctx = wx.createCanvasContext('myCanvas');
  this.ctx = ctx;
  this.setData({ rows: [] });
  
  // 从缓存中读取数据
  const rows = wx.getStorageSync('rows');
  if (rows) {
    this.setData({ rows });
  }
  
  this.drawTable();
},

drawTable() {
  // 绘制表格内容的代码
  
  // 将绘制的数据保存到缓存中
  wx.setStorageSync('rows', this.data.rows);
},

这样，在退出小程序后再次进入时，就可以从缓存中读取数据并继续绘制上次的内容。