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

2023-11-13

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

}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • notepad++正则表达式如何从此列表中提取userId

    我有下面这个列表 originalscrape scrapeDate userId username full name is private follower count following count media count biogr
  • 在记事本++中逐个字符替换“word”之后?

    我有一个 STRING wordride 普通火 我尝试替换为常用表达 找什么 gt word G
  • 在Notepad++中选择换行符

    我注意到 当我加载文本文件时 Notepad 将识别并使用该文件中的任何换行符 n or r n 是否有一些选项可以让我选择默认情况下用于新文档的选项 我查看了帮助并用谷歌搜索 但找不到任何东西 对于任何新文档 Settings gt Pr
  • 如何删除单个换行符?

    我想删除文本中的单行符 但不删除双行符 我可以使用替换行 r n 如何删除单个换行符 EDIT 我还需要在每行之前添加空格 例如 如果原始文本是 line1 line2 line3 它必须转换为 line1 line2 line3 如果我明
  • 任何自动保存文档版本的 Notepad++ 插件 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 有谁知道有什么记事本 插件可以定期保存我正在处理的内容的版本吗 理想情况下 它会保存许多版本 并在标题
  • Notepad++ 可以配置为识别编译器错误消息并跳转到相应的位置吗?

    我正在一台没有 IDE 但使用 Notepad 的机器上构建一些相当大的代码 编译结果被重定向到一个文件 有时会有错误消息 满足定义良好的正则表达式 我想知道 NPP 是否有一个插件 它可以解析日志文件 识别错误 警告消息 并让我在相应的错
  • 使用Notepad++编译Java代码

    我一直在尝试将 Notepad 设置为一个小型 Java 环境 主要是为了学习 Java 因为我在获得一个与 NetBeans 一起使用的简单程序时遇到了一些困难 不幸的是 所有关于设置 Notepad 来调用 Java 代码的建议都不起作
  • Notepad++ 的整洁 CSS

    是否有某种 CSS 整洁可用于 Notepad 我已经尝试了 TEXTFX 中似乎每个菜单项 但似乎没有一个能做到这一点 我习惯使用 PSPAD 只需选择 CSS 并单击 重新格式化为结构化 CSS EDIT在问这个问题很长时间后发现了一个
  • 如何在notepad++中使用正则表达式修剪xml标签中的空格?

    我正在尝试修剪一个空间XML标签 这是我所拥有的示例
  • 如何在 Notepad++ 中使用富文本?

    我喜欢Notepad 但有时我需要将一些单词设置为粗体或草书 更改字体大小等 在 Notepad 中可以吗 我们可以突出显示文本 右键单击文本Style Token gt Using 1st Style通过使用这个我们可以突出显示文本 最多
  • 如何删除多个文件中的第一个空白行?

    我有数千个第一行为空的文本文件 是否可以一次性删除所有文件中的这一行 你需要一个像这样的bat脚本 echo off for i in txt do more 1 fi gt gt temp del fi ren temp nxi 将上面的
  • Notepad++改变文字颜色?

    我正在使用 Notepad 来模拟 ISPF 屏幕 我使用 StyleConfigurator 选择合适的字体 将其着色为绿色 并设置黑色背景 如何永久更改所选文本的颜色 例如 如果我的客户名称 THALECRESS 如何将客户名称 蓝色
  • Rockscroll 之类的记事本++ 插件?

    有没有像 Rockscoll for VisualStudio for notepad 这样的插件 至少有接近它的东西吗 Thanks 它是内置的 View gt Document Map
  • 如何将 Notepad++ 配置为使用空格而不是制表符?

    Notepad 不断插入制表符 这后来弄乱了我的代码 这种情况不仅发生在我按下 Tab 键时 其他时候也会发生 我希望它使用 4 个空格而不是制表符 如何让 Notepad 插入空格而不是制表符 前往优先菜单下的菜单命令Settings 然
  • 即使没有任何内容,也会出现 Notepad++ XML 解析错误“文档末尾有额外内容”

    当我尝试在 Notepad 中验证 55 mb XML 文件时 收到上述错误消息 第一个遇到的错误在这里 第 1441520 行 共 22258651 行 Notepad 的屏幕截图 https i stack imgur com 9Atc
  • 如何在记事本++中重复该行?

    如何在记事本 中重复该行 例如我有以下输入 a 01 a 02 a 03 a 04 我希望它成为 a 01 a 01 a 02 a 02 a 03 a 03 a 04 a 04 所以每一行都应该显示twice 打开搜索对话框并写入 Find
  • Notepad++ SourceCookifier 插件在大型 C++ 标头上非常慢

    我喜欢在 Notepad 中浏览我的 C 项目 我使用 SourceCookifier 插件来轻松地在大文件的定义之间跳转 但是 如果我加载一个大的 C 头文件 大约 30 000 行 其中有很多 define and typedef里面的
  • 如何消除批处理文件动画中的闪烁? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 因此 我一直在批量制作一个假 GUI 以作为我正在做的 YouTube 评论的结尾 它基本上是一堆方框
  • 删除 XML 中的指定标签 (notepad++)

    我的 GPS 轨迹有一个 非常 大的 XML 文件 它是这样构建的
  • Notepad++ 正则表达式代码提取行尾

    我有一个需要捕获的源代码 整个文件只有一行 但我无法捕获我需要的数据 allow ok secret 4326dwsaddsafsd286435dsfs754 现在我需要捕获每次都会变化的数据 4326dwsaddsafsd286435ds

随机推荐

  • Linux嵌入式学习---C语言之赋值

    Linux嵌入式学习 C语言之赋值 一 语句的作用和分类 1 常见的9种控制语句 2 函数调用语句 3 表达式语句 4 空语句 5 复合语句 二 赋值语句 1 赋值运算符 2 复合的赋值运算符 3 变量赋初值 一 语句的作用和分类 1 常见
  • 彩光和灰光模块_Y5T265 【5G光模块】一个基站前传到底是用6个还是12个,或者是24模块...

    Y5T264 5G光模块 模式分配噪声 接着昨天继续分析5G前传光模块白皮书 问题1 在白皮书的第三页 前传光模块的需求 有不同的传输距离 这个我们能理解 有需要灰光或者彩光的 我们也能理解 但我们不能理解的是为什么前传模块的速率有10G
  • signature今日头条php实现,今日头条_signature 分析

    某天群友问了一句头条翻页算法 然后随手把算法摘出来 现在分享出来 window TAC console log userInfo id a t navigator window navigator userAgent function as
  • Deep Spatio-Temporal Residual Networks(深度时空残差神经网络)

    目录 业务场景 环境搭建 数据及目录结构 模型 代码 建模 训练 预测及结果呈现 文章只是对模型的学习与实践做简要记录 以免日后给忘了 并没有对模型优劣 应用的场景等理论方面有过多分析 适合快速动手搭建 成功运行 分析代码 并学习怎样用ke
  • sql查询字段重复的数据 并且修改数据某个字段

    1 sql查询字段重复的数据 并且修改所有行某个字段值 UPDATE 表名 a SET a 要修改的字段名 1 WHERE a 重复字段 IN SELECT b 重复字段 FROM SELECT c 重复字段 FROM 表名 c GROUP
  • 5天玩转MySQL:数据库概念、SQL介绍、数据库和数据表基本操作、字符表

    数据库概念 数据库 Database 是按照数据结构来组织 存储和管理数据的建立在计算机存储设备上的仓库 数据库 存储数据的仓库 数据库分类 网络数据库 网络数据库是指把数据库技术引入到计算机网络系统中 借助于网络技术将存储于数据库中的大量
  • Eclipse导入外部工程运行报错:The selection cannot be run on any server

    一 错误描述 课下复习时导入老师的Demo 发现项目报错 在项目上有红色叉 运行时报如下错误 二 解决步骤 1 在项目上右键 gt Properties 2 打开Java Build Path 发现JDK和Tomcat都未绑定 这是原先项目
  • vue左侧悬浮_vue实现移动端悬浮窗效果

    本文讲述 在使用VUE的移动端实现类似于iPhone的悬浮窗的效果 相关知识点 touchstart当在屏幕上按下手指时触发 touchmove 当在屏幕上移动手指时触发 touchend 当在屏幕上抬起手指时触发 mousedown mo
  • UE4的SpawnActor问题

    1 SpawnActor传参 做项目过程中发现先SpawnActor再传参会先运行 生成的Actor的BeginPlay然后才进行传参 可是我在BeginPlay时就需要用到参数做操作了 发生情况时代码如下 if BaseCharactor
  • 9.21 小米一面面经

    介绍项目经历 测试时用的方式 在公司学到了哪些 有什么积累 将来想发展的方向 手工测试 测试开发 上学时的专业课 手机测试部 通信系统部 和通信关联性比较大 通信协议相关测试 跟手机芯片相关 2G3G4G5G网络 在研产品测试 国际运营商的
  • 计操理论课08 -- openEuler实验第七章文件系统

    文章目录 任务1 为 Ext4 文件系统添加扩展属性 25min 任务描述 任务过程及截图 任务2 注册一个自定义的文件系统类型 15min 任务描述 任务代码 任务截图 任务3 在 proc下创建目录 20min 任务描述 任务代码 任务
  • (LeetCode C++)移动零

    给定一个数组 nums 编写一个函数将所有 0 移动到数组的末尾 同时保持非零元素的相对顺序 请注意 必须在不复制数组的情况下原地对数组进行操作 示例1 输入 nums 0 1 0 3 12 输出 1 3 12 0 0 示例2 输入 num
  • 25道Python练手题(附详细答案),赶紧收藏!python入门

    题目 1 水仙花数 水仙花数 Narcissistic number 也被称为超完全数字不变数 pluperfect digital invariant PPDI 自恋数 自幂数 阿姆斯壮数或阿姆斯特朗数 Armstrong number
  • 启动jar包报错: 找不到或无法加载主类

  • C++ 删除文件夹下所有内容

    介绍一种删除文件夹下所有内容的实现方式 包括删除该文件夹 注 该文件夹下面 无论嵌套多少层文件夹或文件数据 都可以删掉 直接上代码 Tip 以 方式查找所有类型文件 do while方式进行循环遍历 直到满足终止条件 删除文件夹及内容 in
  • web前端开发语言介绍

    web前端开发语言主要包含 html语言 css样式代码 javascript脚本 html5 css3 jQuery ajax Bootstrap Backbone 1 html语言 网页的基本标记语言 也是最基础的语言 掌握起来比较简单
  • 8.cmake常用命令

    前面我们讲到了 cmake 常用的变量 相信 cmake 即编程 的感觉会越来越明显 无论如何 我们仍然可以看到 cmake 比 autotools 要简单很多 接下来我们就要集中的看一看 cmake 所提供的常用指令 在前面的章节我们已经
  • ctfshow-WEB-web11( 利用session绕过登录验证)

    ctf show WEB模块第11关用session中保存的密码进行登录验证 将 session中保存的密码清空即可绕过 页面中直接给了源码 很明显是让我们进行代码审计 源码中将我们输入的密码与 session中保存的密码进行匹配 两个pa
  • stata F值缺失_stata操作问题实录

    一 数据整理 1 新变量带原变量的标签 sysuse auto clear gen m mpg 新建的变量m没有了标签 我想要标签 clonevar Mpg mpg 直接用clonevar命令就好了 2 下载时候就应该直接选合并报表 ege
  • 【Uniapp】base64图片资源转为本地图片,解决canvas不支持base64问题

    通过接口获取到base64类型的二维码 把二维码放到canvas里生成海报 遇到的问题 在微信小程序开发工具中能够正常显示海报 到真机上测试就无法显示二维码 原因 因为canvas不支持base64 其次在使用小程序 canvas 的 dr