微信小程序中base64格式的小程序码通过canvas画出来无效
使用场景
小程序中的文章详情页面有一个分享功能:用户点击分享按钮,生成一张分享图片(包括封面图,简介以及带有文章ID的小程序码),方便用户保存在本地。
问题说明
小程序码通过后台接口获取,格式如下:'data:image/jpg;base64,/9j/4AAQSkZJRgAB...'(只截取了前面一部分)
通过canvas画出来之后,在微信开发者工具上有效,在真机上无效。
解决方法
先把小程序码通过小程序API中的FileSystemManager.writeFile()接口写入本地并获取到一个临时URL。
关键代码
// 把小程序码写入本地
export const writeFile = (base64Str => {return new Promise((resolve,reject)=>{// 后台返回的base64格式数据的回车换行换为空字符''let base64Image = base64Str.split(',')[1].replace(/[\r\n]/g, '');// 文件管理器const fsm = wx.getFileSystemManager();// 文件名const FILE_BASE_NAME = 'tmp_base64src';// 文件后缀const format = 'png';// 获取当前时间戳用于区分小程序码,防止多次写进的小程序码图片都一样,建议通过不同的列表ID来区分不同的小程序码const timestamp = (new Date()).getTime();// base转二进制const buffer = wx.base64ToArrayBuffer(base64Image),// 文件名filePath = `${wx.env.USER_DATA_PATH}/${timestamp}share.${format}`;// 写文件fsm.writeFile({filePath,data: buffer,encoding: 'binary',success(res) {// 读取图片wx.getImageInfo({src: filePath,success: function(res) {let img = res.path;// 把需要画出来的图片的临时url暴露出去resolve(img);reject();},fail(e){console.log('读取图片报错');console.log(e);},error(res) {console.log(res)}})},fail(e){console.log(e);}})}).catch((e) => {console.log(e);})
});
// 在页面调用方法
import { writeFile } from '../../utils/wxFunc'getUseCode () {writeFile(codeUrl).then(img => { // // codeUrl为base64格式的小程序码console.log('可使用的小程序码:' + img); // img格式:http://usr/1599468897794share.pngthis.createCanvas(img);}).catch(e => {console.log(e);})
}
进一步完善
这样每调用一次写一个文件,文件会越写越多,当文件管理器中文件总大小超过最大限制则会报错。解决方法:在写入文件之前先做一次删除操作,关键代码如下:
// 删除存储的垃圾数据
export const removeSave = () =>{return new Promise((resolve)=>{// 文件管理器const fsm = wx.getFileSystemManager();// 获取文件列表fsm.readdir({dirPath: wx.env.USER_DATA_PATH, // 当时写入的文件夹success(res){res.files.forEach((el) => { // 遍历文件列表里的数据// 删除存储的垃圾数据if (el !== 'miniprogramLog') { // 过滤掉miniprogramLogfsm.unlink({filePath: `${wx.env.USER_DATA_PATH}/${el}`, // 文件夹也要加上,如果直接文件名会无法找到这个文件fail(e){console.log('readdir文件删除失败:', e)}});}})resolve()}})})
}
// 在页面调用方法
import { writeFile } from '../../utils/wxFunc'removeBeforeFiles () {removeSave().then(() => {this.getUseCode();}).catch(e => {console.log(e);})
},getUseCode () {writeFile(codeUrl).then(img => { // codeUrl为base64格式的小程序码this.createCanvas(img);}).catch(e => {console.log(e);})
},createCanvas (img) {// 操作
}
完成,又可以愉快地踩下一个坑了!
微信小程序中base64格式的小程序码通过canvas画出来无效相关推荐
- 微信小程序中转换时间格式IOS不兼容的问题
微信小程序中转换时间格式IOS不兼容的问题 昨天小程序上要显示一个截止日期,遇到了这个问题,调试了才找到问题的所在,然后在网上找了资料才知道这个问题的原因,原来是因为IOS系统不支持2020-12-3 ...
- 如何在微信开发者工具中编译并运行小程序
微信开发者工具是用来开发.调试和发布小程序的工具,使用它可以方便地完成小程序的开发过程. 如果要在微信开发者工具中编译并运行小程序,可以按照以下步骤操作: 首先,确保你已经安装了微信开发者工具,并且已 ...
- c语言中延时时间计算,能精确计算C语言延时程序中延时时间的小工具(转)
能精确计算C语言延时程序中延时时间的小工具 Emu51Form是一个软仿真计时器 具体使用方法为: 1.打开 keil\tools,ini 文件,在它的c51栏中加入 AGSI9=Emu51Form. ...
- 在Linux环境下用C语言编写一个乘法程序mult,从命令行接收两个数字,然后输出其乘积;再用C语言编写一个exec1程序,在程序中使用execvp调用mult程序计算5与10的乘积。
在Linux环境下用C语言编写一个乘法程序mult,从命令行接收两个数字,然后输出其乘积:再用C语言编写一个exec1程序,在程序中使用execvp调用mult程序计算5与10的乘积. 1.mult. ...
- 微信小程序中base64图片的显示与保存
当我们拿到如下base64格式的数据时: 显示 使用image标签,src属性添加data:image/png;base64, (注意:若imgData返回数据中含有data:image/png;ba ...
- 多个查询语句能否一次把结果导出_mysql表中base64格式数据查询
需求: 为了避开特殊字符(如:单引号)影响,把某些字段保存为base64格式. SQL语句直接解码base64编码数据,直接查询出原始数据. 表中数据如下 很不直观,当根据where条件查询时,肉眼不 ...
- iOS 如何在一个应用程序中调用另一个应用程序
原则上iOS的沙箱原理,是阻止一个app去访问其他app的资源乃至是系统底层的资源的但是我们可以通过一种变相的方式:通过对应的URL模式和其他程序进行通讯. iOS应用之间的调用步骤: 一, 调用自己 ...
- c++语言程序中,main()函数必须放在程序开始的部分,C++多选题(附答案)
计算机二级考试,附答案 多选题题库 C概述 1.[多选题.2005-4]不是C语言程序的基本单位是________. (A). 程序行 (B). 函数 (C). 语句 (D). 字符 2.[多选题.2 ...
- 将链接转成base64格式生成二维码和把页面生成图片
将链接转成base64格式 function getUrlBase64 (url, etx, callback) {var canvas = document.createElement('canva ...
最新文章
- VictoriaMetrics如何运用?
- tomcat的server.xml详解
- Beanstalkd使用
- mfc连接ubuntu mysql数据库_Ubuntu 16.04 Linux系统下使用C++连接mysql数据库
- Codeforces Round #618 (Div. 2)-Non-zero
- java导入包srcy有红叉_eclipse导入项目后出现红色叉号的解决方案
- GitHub与Git区别,Git与SVN区别,Git国内镜像下载
- TensorFlow 学习(四)—— computation graph
- Gradle方式构建Java多项目
- Day.js 是一个仅 2kb 大小的轻量级 JavaScript 时间日期处理库,和 Moment.js 的 API 设计保持完全一样,dayjs...
- 机器人对话常用语模板_小a电话机器人免费咨询
- Adafruit_SSD1306库学习
- VSCode 使用 LESS
- GRU 详解+实战(生成汪峰感觉的歌词)
- 人脸图像切割分离工具
- HTTPS 中双向认证SSL 协议的具体过程
- Hadoop的NameNode在启动时都做了哪些事情?源码解析
- 阿姆斯特朗数 matlab,c中阿姆斯特朗数
- 360安全卫士去广告、去多余按钮、与金山网盾等软件共存方法组合
- sqlserver 链接服务器 sql