当canvas 画好图片后,我们想把它保存到本地, 或者上传到服务器上,
用两种方式, 一种是保存图片的 base64 图片信息
另一种是 把图片的二进制数据保存到本地,默认是 png 格式的
第一种方法, 可以使用 canvas 对象的 toDataURL(); 得到一个base64 编码的图片信息
canvas.toDataURL
这里要提醒一下的是 要注意 canvas.getContext();
我们画张,写字是使用的 convas.getContext() 获得的对象, 而 toDataURL是使用的 canvas 对象,
有图为证
第二种方法, 可用在微信中程序中上传图片到服务器, 我们这里就不上传了, 使用微信现成的api 保存到本地吧
wx.canvasToTempFilePath({
canvasId: "canvas",
canvas:that.data.canvasobj,
x:0,
y:0,
success(res){
console.log(res.tempFilePath);
wx.saveImageToPhotosAlbum({
filePath:res.tempFilePath,
success(res1){
wx.showToast({
title: '保存成功',
duration: 1000,
});
}
})
},
fail(e){
console.log(e);
}
},that)
上面的 filepath:res.tempFilePath 的值 类似是这个样子的 http://tmp/Q7HOHsK5uM3v9a28c4b4cfd44850fa422994a8ab457f.png
在微信开发者工具中可以打开, 但是在谷歌中是不能打开的
上面的代码可以看到, 它保存到了本地图片库中