小程序canvas保存图片

在微信小程序中，使用Canvas API可以绘制图形并将其保存为图片。下面是保存Canvas内容为图片的基本步骤：

1. 获取Canvas元素：首先，你需要获取一个Canvas实例，这通常是通过设置页面结构中的`canvas`标签的`id`属性来获取的。

<canvas id="myCanvas" canvas-id="myCanvas"></canvas>

2. 绘制操作：在JavaScript中，使用`wx.createSelectorQuery()`创建一个查询对象，然后使用`select()`方法选择Canvas元素，并调用其`draw()`方法进行绘图。

Page({
  canvasReady: function(e) {
    const canvas = e.target;
    const ctx = canvas.getContext('2d');
    
    // 这里进行你的绘图操作，例如：
    ctx.fillStyle = '#000';
    ctx.fillRect(10, 10, 100, 100);
    
    // ...
  },
})

3. 保存图片：当绘图完成后，你可以使用`toDataURL()`方法将Canvas转换为图片的数据URL，然后使用`wx.saveImageToPhotosAlbum()`将图片保存到相册。

canvasReady: function(e) {
  // ... 绘图代码 ...

  let dataURL = canvas.toDataURL('image/jpeg'); // 可以调整图片格式（如 'image/png'）
  
  wx.saveImageToPhotosAlbum({
    filePath: dataURL.replace('data:image/jpeg;base64,', ''), // 使用dataURL去掉前缀
    success: function(res) {
      console.log('图片保存成功', res);
    },
    fail: function(err) {
      console.error('图片保存失败', err);
    }
  });
}