通过接口获取到base64类型的二维码,把二维码放到canvas里生成海报
遇到的问题:
在微信小程序开发工具中能够正常显示海报,到真机上测试就无法显示二维码
原因:
因为canvas不支持base64,其次在使用小程序 canvas 的 drawImage api,需要将网络图片转为本地图>片,base64不能通过uni.downloadFile这种方式下载文件资源到本地,所以在真机上,无法正常显示海>报。
解决方法:
//1、将获取到base64图片通过uni.getFileSystemManager和wx.base64ToArrayBuffer将图片保存到本地,获取到本地地址
uni.getFileSystemManager //获取全局唯一的文件管理器
wx.base64ToArrayBuffer //将 Base64 字符串转成 ArrayBuffer 数据var urlQRBase64= 'data:image/jpg;base64,'+urlQRBase64; //urlQRBase64 base64数据 (如果没有前缀,自行加上前缀)
var urlQR = await await poster.base64ToSave(urlQRBase64);//base64转本地图片,将数据存储在本地
const base64ToSave = function (base64data,FILE_BASE_NAME='tmp_base64src') {const fsm = uni.getFileSystemManager();return new Promise((resolve, reject) => {//format这个跟base64数据的开头对应const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];if (!format) {reject(new Error('ERROR_BASE64SRC_PARSE'));}const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;const buffer = wx.base64ToArrayBuffer(bodyData);fsm.writeFile({filePath,data: buffer,encoding: 'binary',success() {resolve(filePath);},fail() {reject(new Error('ERROR_BASE64SRC_WRITE'));},});});
}2、制作海报,保存好生成海报后的临时地址3、制作完海报后删除本地数据
const removeSave = function (FILE_BASE_NAME='tmp_base64src',format='jpg') {return new Promise((resolve)=>{// 把文件删除后再写进,防止超过最大范围而无法写入const fsm = uni.getFileSystemManager(); //文件管理器const FILE_BASE_NAME = 'tmp_base64src';const format = 'jpg';const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;fsm.unlink({filePath: filePath,success(res) {console.log('文件删除成功');},fail(e){console.log('readdir文件删除失败:',e)}});})}