【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)}});})}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/41048.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

异常堆栈缺失与OmitStackTraceInFastThrow

目录 现象原因OmitStackTraceInFastThrow源码层面分析OmitStackTraceInFastThrow阈值是多少源码源代码解释 现象 异常没有堆栈信息。只有短短的异常类信息,例如java.lang.NullPointerException。 完整的异常堆栈示例: java.lang.NullPointerException…

爬虫逆向实战(十六)--某建筑市场平台

一、数据接口分析 主页地址:某建筑市场平台 1、抓包 通过抓包可以发现数据接口是list 2、判断是否有加密参数 请求参数是否加密? 无请求头是否加密? 无响应是否加密? 通过查看“响应”模块可以发现,返回的响应是…

MAUI+Blazor:windows 打包踩坑

文章目录 前言MSIX安装文件如何发布选择Windows平台旁加载自定义签名版本号安装 总结 前言 最近打算研究一下MAUIBlazor,争取在今年年底之前彻底搞懂MAUIBlazor的安装模式, MSIX安装文件 Windows 4种安装程序格式MSI,EXE、AppX和MSIX优缺点…

Java常用API---快速达到Java工作水准系列(1)

目录 1.集合 2.包装类 3.日期处理以及格式化 4.字符串处理类 5.数组 5.BigDecimal 6.Math 1.集合 毋庸置疑,集合在实际项目的使用概率几乎是百分之百。无论是用于数据存储和管理、去重和查找亦或是数据检索和遍历,都离不开集合的使用。任何一个项…

Spring Cloud Gateway系例—参数配置(CORS 配置、SSL、元数据)

一、CORS 配置 你可以配置网关来控制全局或每个路由的 CORS 行为。两者都提供同样的可能性。 1. Global CORS 配置 “global” CORS配置是对 Spring Framework CorsConfiguration 的URL模式的映射。下面的例子配置了 CORS。 Example 77. application.yml spring:cloud:gat…

【【STM32----I2C通信协议】】

STM32----I2C通信协议 我们会发现I2C有两根通信线: SCL和SDA 同步 半双工 带数据应答 支持总线挂载多设备(一主多从,多主多从) 硬件电路 所有I2C设备的SCL连在一起,SDA连在一起 设备的SCL和SDA均要配置成开漏输出模式 …

5.Vue_Element

文章目录 1 Ajax1.1 Ajax介绍1.1.1 Ajax概述1.1.2 Ajax作用1.1.3 同步异步 1.2 Axios1.2.1 Axios的基本使用1.2.2 Axios请求方法的别名 2 前端工程化2.1 前端工程化特点2.2 Vue项目开发流程 3 Vue组件库Element3.1 Element介绍 1 Ajax 1.1 Ajax介绍 1.1.1 Ajax概述 Ajax: 全…

【Unity游戏开发】基于前缀树的红点系统构思与客户端方案

一、前言 前段时间负责了项目中红点系统的实现,和大家分享一下初期是设计思路 红点系统客户端业务的一般实现过程与方式: 数据管理:首先要在客户端建立一个数据管理系统,用于存储和管理各个业务模块的红点状态。可以是一个中央数据管理器或模块化的数据管理系统,具体根据游…

VUE中babel.config.js配置按需引入

VUE中babel.config.js配置 vue/cli-plugin-babel/preset是一款 babel 插件,它会在编译过程中将 import 引入自动转换为按需引入的方式。 module.exports {presets: [vue/cli-plugin-babel/preset],plugins: [[import, {libraryName: element-ui,libraryDirectory…

系统架构设计师---多媒体技术及其应用

概念 媒体:承载信息的载体。 多媒体:数字、文字、声音、图形、图像和动画等各种媒体的有机组合,并与先进的计 算机、通信和广播电视技术相结合,形成一个可组织、存储、操纵和控制多媒体信息的集成环境和 交互系统。 多媒体技术:以数字化为基础,能够对多…

召集令:CloudQuery 社区有奖征文活动来啦!

CloudQuery 社区第一期征文活动来袭!!!只要你对 CloudQuery 产品感兴趣,或者是希望了解 CQ ,都可以来参加,在本期活动中,我们也为大家准备了多种主题供你选择,CQ 使用案例、版本对比…

udp与can通信的选择与比较

UDP(用户数据报协议)和CAN(控制器局域网)是两种不同的通信协议,它们在实时传递性上有一些区别。 UDP是一种无连接的传输协议,它提供了简单的、不可靠的数据传输。UDP不提供可靠性保证、流控制或重传机制。…

EMO实战:使用EMO实现图像分类任务(一)

文章目录 摘要安装包安装timm安装 grad-cam安装einops 数据增强Cutout和MixupEMA项目结构计算mean和std生成数据集 摘要 论文翻译:https://blog.csdn.net/m0_47867638/article/details/132034098?spm1001.2014.3001.5501 官方源码:https://github.com/…

shell的两种属性: 交互(interactive)与登录(login)

1. 背景 在看shell变量的时候引起了兴趣: 局部变量,全局变量,环境变量,shell的配置文件,参考博客: http://c.biancheng.net/view/773.html 2. 交互式与非交互式 参考博客: shell的两个属性:是否交互式(interactive), 是否登录…

生产环境下的终极指南:使用 Docker 部署 Nacos 集群和 MySQL

🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 &a…

01-集群安装JDK(普通用户)

机器部署 集群规划 我们准备三台服务器kk01、kk02、kk03,内存4G、硬盘50G、处理器4核心2内核(总8) kk01使用 192.168.188.128 kk02使用 192.168.188.129 kk03使用 192.168.188.130 模板机准备 我们先创建一台作为模板机,后…

C++ 11 新特性 学习笔记

1、字符串原始字面量 R“()”用于取消转义,可用于路径表示 运行成功 这两个RawValue起到描述作用(可以不写),并不参与输出 注意,这里输出中文乱码 2、nullptr NULL在C中表示0,在非C中表示万能指针 nullpt…

Vue3 使用json编辑器

安装 npm install json-editor-vue3 main中引入 main.js 中加入下面代码 import "jsoneditor";不然会有报错&#xff0c;如jsoneditor does not provide an export named ‘default’。 图片信息来源-github 代码示例 <template><json-editor-vue class…

SQL | 分组数据

10-分组数据 两个新的select子句&#xff1a;group by子句和having子句。 10.1-数据分组 上面我们学到了&#xff0c;使用SQL中的聚集函数可以汇总数据&#xff0c;这样&#xff0c;我们就能够对行进行计数&#xff0c;计算和&#xff0c;计算平均数。 目前为止&#xff0c…

ESP-C3入门21. I2C接口点亮1306驱动的OLED屏

ESP-C3入门21. 点亮1306驱动的OLED屏 一、Espressif/ssd1306 驱动简介1. 驱动介绍2. OLED充电泵概念 二、I2C 通讯步骤1. 初始化 I2C 总线 (i2c_master_init()函数)&#xff1a;2. 创建 I2C 命令句柄 (i2c_cmd_handle_t cmd i2c_cmd_link_create())&#xff1a;3. 发送启动信号…