1. 在 WXML 文件中添加 <canvas> 组件：
<canvas canvas-id="myCanvas" style="width: 300px; height: 200px;"></canvas>
在这个示例中，myCanvas 是 Canvas 组件的唯一标识。
2. 在对应的 Page 或 Component 中进行绘图和导出图片操作：
Page({
onReady: function() {
// 页面渲染完成时获取 Canvas 绘图上下文
const ctx = wx.createCanvasContext('myCanvas');
// 在这里进行具体的绘图操作
// 绘制完成后调用 draw() 方法，将绘制的内容显示到 Canvas 上
ctx.draw(false, () => {
// 绘制完成后导出图片
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function(res) {
console.log('Canvas 导出成功', res.tempFilePath);
// 在这里可以使用导出的图片路径，例如上传到服务器或保存到本地
},
fail: function(error) {
console.error('Canvas 导出失败', error);
}
});
});
}
});
在上述代码中，wx.canvasToTempFilePath 方法用于将 Canvas 组件中的内容导出为图片文件。导出成功后，可以在 success 回调中获取图片的临时文件路径。在这里，你可以根据需求将图片上传到服务器、保存到本地或进行其他操作。
请注意，wx.canvasToTempFilePath 方法需要在 ctx.draw 的回调中调用，确保在绘制完成后再执行导出图片操作。
转载请注明出处：http://www.zyzy.cn/article/detail/975/微信小程序