微信小程序用canvas展示base64格式的图片

目前有个需求，就是分享页面到朋友圈，由后台传图片的数据，是base64格式的，然后要展示在页面中并且点击保存按钮可以将图片保存在系统相册中。

实现一、

一开始想着是用image直接去显示，然后使用wx.saveImageToPhotosAlbum(Object object)保存到系统相册，但是由于后台传来的base64格式的，所以想着先生成本地图片，然后再进行保存。

var imgName = wx.env.USER_DATA_PATH + '/wareInfo_shareimg.jpeg'

var fs = wx.getFileSystemManager();

fs.writeFileSync( imgName, this.showImgData, 'base64')

在开发者工具上图片展示出来了，但是保存后图片打不开，手机上能显示也打不开，无奈只能换一种实现

 

实现二、

通过百度，很多人说直接使用canvas去画图片，然后进行保存。

const ctx = wx.createCanvasContext('img-canvas')

ctx.drawImage(this.showImgData, 0, 0, 300 * this.rpx, 449.5 * this.rpx)

ctx.draw()

然后调用wx.canvasToTempFilePath(Object object)生成一个临时文件，在使用wx.saveImageToPhotosAlbum(Object object)保存

wx.canvasToTempFilePath({

canvasId: 'img-canvas',

success(res) {

console.log(res.tempFilePath)

wx.saveImageToPhotosAlbum({

filePath: res.tempFilePath,