uniapp图片数据流���� JFIF ��C 转化base64

news2024/12/21 12:32:38

1,后端返回的是图片数据流,格式如下

���� JFIF ��C  如何把这样的文件流转化为base64,

 btoa 是浏览器提供的函数,但在 小程序 环境中(如微信小程序、支付宝小程序),btoa 不可用。你需要手动编写 Base64 编码逻辑或者使用第三方库

2,uniapp调用接口

export  async function getImgFn(objectKey,md5){
		const res =await uni.request({
	            url:ip地址,
				header: {
					  'VerificationToken': 12,   //请求头根据你的要求传,我这里没有要求
				},
	            method: "GET",
				responseType: 'arraybuffer', 
            });
			let base64img='data:image/jpeg;base64,' + base64Encode(res.data)  //手动写一个base64Encode方法
		 return base64img;
 }

3,手动写一个base64Encode数据流转base64方法

function base64Encode(buffer) {
			    const base64Chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
			    let binary = '';
			    const bytes = new Uint8Array(buffer);
			    const len = bytes.byteLength;
			
			    for (let i = 0; i < len; i++) {
			        binary += String.fromCharCode(bytes[i]);
			    }
			
			    let base64 = '';
			    let padding = '';
			    let remainder = binary.length % 3;
			
			    if (remainder > 0) {
			        for (let i = 0; i < 3 - remainder; i++) {
			            padding += '=';
			            binary += '\0';
			        }
			    }
			
			    for (let i = 0; i < binary.length; i += 3) {
			        const n = (binary.charCodeAt(i) << 16) |
			                  (binary.charCodeAt(i + 1) << 8) |
			                  binary.charCodeAt(i + 2);
			
			        base64 += base64Chars[(n >> 18) & 63] +
			                  base64Chars[(n >> 12) & 63] +
			                  base64Chars[(n >> 6) & 63] +
			                  base64Chars[n & 63];
			    }
			
			    return base64.substring(0, base64.length - padding.length) + padding;
	}

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

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

相关文章

电脑问题4[非华为电脑安装华为电脑管家华为荣耀手机多屏协助]

非华为电脑安装华为电脑管家华为荣耀手机多屏协助 我是荣耀手机之前一直用的是window的"连接手机"功能,电脑控制手机还蛮好用,但是又不能够没有好的电脑控制手机的功能,后来想了想看了看,竟然安装了华为电脑关键,竟然可以顺利连接上荣耀手机,发现还蛮好用! 本文引用…

win11 C盘出现感叹号解决方法

出现感叹号&#xff0c;原因是对C盘进行了BitLocker驱动器加密操作。如果想去除感叹号&#xff0c;对C盘进行BitLocker解密即可。 步骤如下&#xff1a; 1.点击Windows搜索框 2.搜索框内输入 系统 3.按下回车&#xff0c;进入系统界面 4.点击隐私和安全性 点击BitLocker驱…

MyBatis通过注解配置执行SQL语句原理源码分析

文章目录 前置准备流程简要分析配置文件解析加载 Mapper 接口MapperAnnotationBuilder解析接口方法注解parseStatement 方法详解MapperBuilderAssistant 前置准备 创建一个mybatis-config.xml文件&#xff0c;配置mapper接口 <mappers><!--注解配置--><mapper…

[数据结构] 链表

目录 1.链表的基本概念 2.链表的实现 -- 节点的构造和链接 节点如何构造? 如何将链表关联起来? 3.链表的方法(功能) 1).display() -- 链表的遍历 2).size() -- 求链表的长度 3).addFirst(int val) -- 头插法 4).addLast(int val) -- 尾插法 5).addIndex -- 在任意位置…

计算机基础 试题

建议做的时候复制粘贴,全部颜色改为黑色,做完了可以看博客对答案。 一、单项选择题(本大题共25小题,每小题2分,共50分〉 1.计算机内部采用二进制数表示信息,为了便于书写,常用十六进制数表示。一个二进制数0010011010110用十六进制数表示为 A.9A6 B.26B C.4D6 D.…

设计模式12:状态模式

系列总链接&#xff1a;《大话设计模式》学习记录_net 大话设计-CSDN博客 参考&#xff1a;设计模式之状态模式 (C 实现)_设计模式的状态模式实现-CSDN博客 1.概述 状态模式允许一个对象在其内部状态改变时改变其行为。对象看起来像是改变了其类。使用状态模式可以将状态的相…

SmartX分享:NVMe-oF 介绍、SMTX ZBS 如何选择高性能场景解决方案与如何实现

目录 背景什么是 NVMe-oFZBS AccessiSCSI 与 iSERNMVe-oF 介绍NVMeNVMe-oFNVMe-oF 承载网络&#xff08;数据平面&#xff09; ZBS NVMe-oF 实现ZBS 接入策略ZBS 接入点分配策略性能测试 为什么要支持 RoCE引用 背景 前几篇文章&#xff0c;我们认识到了 SmartX 公司产品 SMTX…

数据可视化-1. 折线图

目录 1. 折线图适用场景分析 1. 1 时间序列数据展示 1.2 趋势分析 1.3 多变量比较 1.4 数据异常检测 1.5 简洁易读的数据可视化 1.6 特定领域的应用 2. 折线图局限性 3. 折线图代码实现 3.1 Python 源代码 3.2 折线图效果&#xff08;网页显示&#xff09; 1. 折线图…

python网络框架——Django、Tornado、Flask和Twisted

Django、Tornado和flask是全栈网络框架&#xff0c;而Twisted更专注于网络底层的高性能封装&#xff0c;不提供HTML模版引擎等界面功能&#xff0c;因此不能称为全栈框架。 1、Django 发布于2003年&#xff0c;是当前python世界里最负盛名且最成熟的网络框架。相较于其他web框…

Flash语音芯片相比OTP语音芯片的优势

Flash语音芯片和OTP语音芯片是两种常见的语音解决方案&#xff0c;在各自的应用领域中发挥着重要作用。本文‌将介绍Flash语音芯片相比OTP(One-Time Programmable)语音芯片的显著优势‌。 1‌.可重复擦写‌&#xff1a;Flash语音芯片的最大特点是支持多次编程和擦除&#xff0c…

门店全域推广,线下商家营销布局的增量新高地

门店是商业中最古老的经营业态之一。很早就有行商坐贾的说法&#xff0c;坐贾指的就是门店商家&#xff0c;与经常做商品流通的「行商」相对应。 现在的门店经营&#xff0c;早已不是坐等客来&#xff0c;依靠自然流量吸引顾客上门&#xff0c;大部分的门店经营与推广都已经开…

NX系列-使用 `nmcli` 命令创建 Wi-Fi 热点并设置固定 IP 地址

使用 nmcli 命令创建 Wi-Fi 热点并设置固定 IP 地址 一、前言 在一些场景下&#xff0c;我们需要将计算机或嵌入式设备&#xff08;例如 NVIDIA Orin NX&#xff09;转换为 Wi-Fi 热点&#xff0c;以便其他设备&#xff08;如手机、笔记本等&#xff09;能够连接并使用该设备…

[react] <NavLink>自带激活属性

NavLink v6.28.0 | React Router 点谁谁就带上类名 当然类名也是可以自定义 <NavLinkto{item.link}className{({ isActive }) > (isActive ? 测试 : )}>{item.title}</NavLink> 有什么用?他会监听你的路由,刷新的话也会带上激活效果

【LC】100. 相同的树

题目描述&#xff1a; 给你两棵二叉树的根节点 p 和 q &#xff0c;编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同&#xff0c;并且节点具有相同的值&#xff0c;则认为它们是相同的。 示例 1&#xff1a; 输入&#xff1a;p [1,2,3], q [1,2,3] 输出&…

代码随想录day24 | leetcode 93.复原IP地址 90.子集 90.子集II

93.复原IP地址 Java class Solution {List<String> result new ArrayList<String>();StringBuilder stringBuilder new StringBuilder();public List<String> restoreIpAddresses(String s) {backtracking(s, 0, 0);return result;}// number表示stringb…

Hive是什么,Hive介绍

官方网站&#xff1a;Apache Hive Hive是一个基于Hadoop的数据仓库工具&#xff0c;主要用于处理和查询存储在HDSF上的大规模数据‌。Hive通过将结构化的数据文件映射为数据库表&#xff0c;并提供类SQL的查询功能&#xff0c;使得用户可以使用SQL语句来执行复杂的​MapReduce任…

AI智能决策赋能服装零售 实现精准商品计划与供需平衡

在服装这个典型的散对散供需模型中&#xff0c;库存问题一直是零售商面临的重大挑战。如何精准预测市场需求&#xff0c;实现供需平衡&#xff0c;成为摆在零售商面前的一道难题。然而&#xff0c;随着智能决策系统的应用&#xff0c;这一切正在悄然改变。 在这个信息爆炸的时代…

RadiAnt DICOM - 基本主题 :从 PACS 服务器打开研究

正版序列号获取&#xff1a;https://r-g.io/42ZopE RadiAnt DICOM Viewer PACS 客户端功能允许您从 PACS 主机&#xff08;图片存档和通信系统&#xff09;搜索和下载研究。 在开始之前&#xff0c;您需要确保您的 PACS 服务器和 RadiAnt 已正确配置。有关配置说明&#xff0c…

VR虚拟展馆如何平衡用户隐私保护与数据收集?

在虚拟现实&#xff08;VR&#xff09;虚拟展馆的设计和运营中&#xff0c;用户隐私保护与数据收集之间的平衡是一个至关重要的议题。 接下来&#xff0c;由专业从事VR虚拟展馆制作的圆桌3D云展厅平台为大家介绍一些策略&#xff0c;可以帮助VR虚拟展馆在收集有用数据的同时&a…

46.全排列 python

全排列 题目题目描述示例 1&#xff1a;示例 2&#xff1a;示例 3&#xff1a;提示&#xff1a; 题解解决方案&#xff1a;回溯算法思路&#xff1a;Python 实现&#xff1a;复杂度分析&#xff1a; 提交结果 题目 题目描述 给定一个不含重复数字的数组 nums &#xff0c;返回…