上篇文章大概写了一下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绘制图片并保存到本地的问题。