小程序canvas绘制并保存图片

这篇主要讲canvas绘制以及保存到本地相册的方法

实现功能如下：

1.用户手动输入文字，并把这些文字绘制到canvas中

2.将图片绘制到canvas中

3.将canvas变成图片并保存到本地相册中

效果如图：

第一部分 wxml

要注意写这种形式tpye='2d'，这是新版本的，旧版本的如下图已经不维护了，所以建议写这种，另外要注意id，不是写canvas-id，而只是id

第二部分 js

这么一写下来也没有什么特别难的地方。其实还可以实现用户手动上传图片，这样可能会更有趣一点

微信小程序中有一个功能是canvas画布功能，那么这个功能该怎么用呢?下面的教程就是关于微信小程序的canvas画布功能怎么用的，一起来看看吧。

微信小程序中有一个功能是canvas画布功能，那么这个功能该怎么用呢?下面的教程就是关于微信小程序的canvas画布功能怎么用的，一起来看看吧。

canvas画布，你可以理解为有一张白布，你可以在画布上画出不同形状、颜色、粗细的图形。

canvas转换图片api不相同，并且参数不相同，支付宝参数与支付宝开发者文档中的参数都出现不相同

下面我们看微信的wx.canvasToTempFilePath和支付宝ctx.toTempFilePath中success返回的参数差异,我们如果要获取对应的图片，wx返回两种图片格式，一种是本地图片，一种是http协议内部临时图片（tempFilePath）。而支付宝只存在一种图片格式，http协议临时图片（apFilePath）。

微信端中如果需要绘画canvas生成的图片进已有的canvas，采用drawImage，其中第一个参数是图片地址，微信端中要采用tempFilePath参数，支付宝端需要采用apFilePath

---