uni-app小程序真机显示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)}});})}

uni-app小程序真机显示canvas上利用base64图片生成的海报相关推荐

微信小程序在一张canvas上把正方形图片绘制成圆形
因为最近在做分享功能,需要用户的头像在微信小程序中,然后写下其他文字,如何在把正方形图片放到canvas,导成圆角.找了两个参考资料,分别是用.clip()和.clearRect()两种方法微信小程 ...
2022年微信小程序真机调试全流程及10大常见问题处理
更多Eclipse.IDEA.微信开发者.数据库调试问题,请关注博主进行交流探讨.开发相关软件无偿下载. 目录一.微信开发者ID注册: 1. 注册地址:https://mp.weixin.qq.co ...
微信小程序真机调试常见问题汇总
更多Eclipse.IDEA.微信开发者.数据库调试问题,请关注博主进行交流探讨.开发相关软件无偿下载. 目录一.微信开发者ID注册: 1. 注册地址:https://mp.weixin.qq.co ...
微信小程序真机调试,苹果用户记得打开本地网络
微信小程序真机调试,苹果用户记得打开本地网络我的真机调试一直显示:request:fail errcode:-109 cronet_error_code:-109 error_msg:net::ER ...
小程序真机调试报错： errMsg“:“hideLoading:fail:toast can‘t be found“？
小程序真机调试报错: errMsg":"hideLoading:fail:toast can't be found"? 上线小程序后报错,导致toast直接不显示或者一闪 ...
小程序真机测试错误代码_测试不充分：知道您的代码是否真的可以投入生产的5种方法...
小程序真机测试错误代码当今的企业都在提高软件交付速度. 但是,发布周期较短时,通常会牺牲代码质量. 当今的DevOps和QA团队承受着防止代码缺陷进入生产的压力,但他们还需要管理空前的工作负载,并且 ...
小程序真机调试代码包太大
在小程序真机调试遇到的问题小小的记录一下问题:message:Error: 代码包大小为 2103 kb,上限为 2048 kb,请删除文件后重试错误原因:代码包超出了限制解决方法:在设置中调整 ...
微信小程序真机调试无法连接websocket解决方案
微信小程序真机调试无法连接websocket 配置Nginx 小程序连接 Nginx 安装配置Nginx 配置如下: upstream websocket{server 域名:8880; }serv ...
iphone/苹果手机微信小程序真机调试网络不通网络请求失败
问题问题:iphone/苹果手机微信小程序真机调试网络请求失败,可以确定的是,真机和开发工具所在电脑肯定是在一个网段的,把蜂窝数据都关了,只保留了WIFI,还是请求不通, 解决最终参考微信 ...
微信小程序真机调试，在连接的进入的时候卡住！
微信小程序真机调试,在连接的进入的时候卡住!还没进去呢 bug描述在进行微信小程序开发的时候,真机调试,但是在加载的时候卡住了,不是发网络请求!大概这样子! 问题解决这期间我试过,换手机登录微信 ...

uni-app小程序真机显示canvas上利用base64图片生成的海报

uni-app小程序真机显示canvas上利用base64图片生成的海报相关推荐

最新文章

热门文章

uni-app小程序 真机显示canvas上利用base64图片生成的海报

uni-app小程序 真机显示canvas上利用base64图片生成的海报相关推荐

最新文章

热门文章

uni-app小程序真机显示canvas上利用base64图片生成的海报

uni-app小程序真机显示canvas上利用base64图片生成的海报相关推荐