微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册(canvas)

　　最近在学小程序，在把当前画布指定区域的内容导出并生成图片保存到本地这个知识点上踩坑了。

　　这里用到的方法是： wx.canvasToTempFilePath()，该方法作用是把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。（详情 看文档）

 

　　这里先来分析一下这句话：导出当前画布指定区域的内容并生成图片 。这里以画一个矩形并将该矩形保存到本地相册为例。

　　首先我们要做的是先在画布上画一个矩形，其次是利用 wx.canvasToTempFilePath()方法导出画布指定区域的内容，这里当然就是要保存这个矩形了，根据该方法返回的文件路径，然后可以使用wx.saveImageToPhotosAlbum()方法将图片保存到本地相册了。

　　思路清晰了，现在可以着手实现了。

　　index.wxml中画布代码如下：

<button type="primary" bindtap="save">保存当前绘图</button>
<canvas canvas-id="myCanvas" style="border: 1px solid" /> 

　　

　　画矩形代码如下(该代码放在save方法中)：

const ctx = wx.createCanvasContext('myCanvas') 
ctx.setFillStyle('red')
ctx.fillRect(20, 20, 150, 100)
ctx.draw()

　　

　　此时点击按钮调用save方法，出现的效果如下：