通过接口获取到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)
}
});
})
}