【Uniapp】base64图片资源转为本地图片,解决canvas不支持base64问题

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

}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值