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

https://blog.csdn.net/spongeK/article/details/84863531

目前有个需求，就是分享页面到朋友圈，由后台传图片的数据，是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,

success(res){

console.log('success--------')

},

fail(res){

console.log('fail--------' +res)

},

complete(res){

console.log('complete----' + res);

}

})

}

})

然后在开发者工具上图片可以显示，并且保存了可以正常打开，心中按捺不住激动啊，努力抑制着上扬的嘴角使用真机调试一看，得，图片出不来啊。泪奔~~~此时只想静静啊~~~

试了一下，如果不是base64格式的数据，直接使用路径或者使用canvas去画，在真机调试上也是可以出来的，最后定论canvas暂时不支持base64。如果找不到别的办法就只能让后端返回图片的路径了，哎，不甘心啊。

 

就这样，一直在谷歌、百度中游走，一直尝试各位前辈的指导，然后发现终于终于，找到了一个方法，在真机上也可以显示图片并且正常保存~

实现三、

将base64转成二进制保存在本地，然后在使用canvas画出来，最后使用wx.saveImageToPhotosAlbum(Object object)保存

const fsm = wx.getFileSystemManager();

var showImgData = data.data

showImgData = showImgData.replace(/\ +/g, ""); //去掉空格方法

showImgData = showImgData.replace(/[\r\n]/g, "");

const buffer = wx.base64ToArrayBuffer(showImgData);

const fileName = wx.env.USER_DATA_PATH + '/share_img.png'

fsm.writeFileSync( fileName, buffer, 'binary')

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

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

ctx.draw()

因为在网上很难找到解决办法， 所以把这个问题记录下来，虽然不知道能不能帮助到别人，毕竟具体问题具体分析，不过通过这次也算是掌握了使用canvas去保存base64图片。
--------------------- 
版权声明：本文为CSDN博主「海绵没有宝宝」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/spongeK/article/details/84863531