上篇文章大概写了一下canvas绘制图片的问题,那么接下来记录一下canvas保存图片的问题~
wx.canvasToTempFilePath()//把当前画布指定区域的内容导出生成指定大小的图片那么我们首先来了解一下这个api的参数们:
除了起始位置及绘制图片的大小,那么需要注意的我已经标记出来了,其中很多其实也不能设置直接用默认值即可。
其中api的成功的回调中会返回生成文件的临时路径,那么我们拿到临时路径进行保存图片到本地就行了。
wx.saveImageToPhotosAlbum()//保存图片到系统相册。保存图片到系统相册的api参数:
这个地方需要注意的是要保存的filePath,图片文件路径,可以是临时文件路径或永久文件路径,不支持网络图片路径。
那么由canvas产生要保存的临时路径,然后用保存图片到系统的api进行保存即可,代码如下:
canvasSave(){ let that = this; //注意这个地方因为我绘制的大小就是我要保存的区域,所以我直接用了默认的横纵坐标和画布区域 wx.canvasToTempFilePath({ canvasId: 'firstCanvas', success(res) { console.log(res.tempFilePath); saveImg(res) }, fail: function() { console.log('fail-downloadFile') } }) let saveImg = function(resourse) { console.log("保存图片:",resourse); wx.saveImageToPhotosAlbum({ filePath: resourse.tempFilePath, success: function(res) { console.log(res) applyApi.toast('保存成功!') }, fail: function(res) { console.log(res) } }) } }这样就解决了用canvas绘制图片并保存到本地的问题。
小程序













