javascript二进制流转图片的操作方法:File、Blob、FileReader、ArrayBuffer、Base64格式之间的转换

news2024/11/24 16:20:56

文章目录

  • 引言
  • I 使用img标签来加载图片
    • 1.1 使用img标签来加载图片
    • 1.2 在加载图片时进行身份验证: sign/Authorization
  • II 跨域请求中包含凭证
    • 2.1 Fetch API在跨域请求中包含凭证
    • 2.2 ajax在跨域请求中包含凭证
  • III 显示图片方式
    • 3.1 创建一个URL指向这个Blob对象
    • 3.2 获取ArrayBuffer类型数据,再转码成base64
    • 3.3 格式转化

引言

  • Blob 全称为 binary large object ,表示原始的类似文件的数据。Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。
  • 文件(File)接口提供有关文件的信息,并允许网页中的 JavaScript 访问其内容。实际上,File 对象是特殊类型的 Blob。
  • FileReader 是一个异步 API,用于读取文件并提取其内容以供进一步使用。FileReader 可以将 Blob 读取为不同的格式。
  • ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer 的内容不能直接操作,只能通过 DataView 对象或 TypedArrray 对象来访问。这些对象用于读取和写入缓冲区内容。
  • Object URL(MDN定义名称)又称Blob URL(W3C定义名称),是HTML5中的新标准。它是一个用来表示File Object 或Blob Object 的URL。
  • Base64 是一种基于64个可打印字符来表示二进制数据的表示方法。Base64 编码普遍应用于需要通过被设计为处理文本数据的媒介上储存和传输二进制数据而需要编码该二进制数据的场景。这样是为了保证数据的完整并且不用在传输过程中修改这些数据。

需求:

  1. 后端返回特定的图片二进制流的时候,前端用blob容器接收二进制流,再通过 URL.createObjectURL(blob)生成一个临时blob展示

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

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

相关文章

用AI制作历史解说视频:GPT + MidJourney + PiKa + FunSound + 剪映

1. 项目介绍 最近某站看到一个看到利用AI创作视频解说,成品画面很酷炫。对此以初学者视角进行复现,创意来源:用AI制作历史解说视频 2. 开始创作 我们参照原作者展示的内容,对古代人物屈原来生成解说视频。 2.1 故事脚本分镜 【…

C++全栈聊天项目(20) 聊天列表动态加载

聊天列表动态加载 如果要动态加载聊天列表内容,我们可以在列表的滚动区域捕获鼠标滑轮事件,并且在滚动到底部的时候我们发送一个加载聊天用户的信号 bool ChatUserList::eventFilter(QObject *watched, QEvent *event) {// 检查事件是否是鼠标悬浮进入…

dockerhub不可用临时解决方案

近日,在拉取一些docker hub的镜像的时候死活拉不下来,要么超时,要么无法接站点地址,不管是docker hub,还是国内镜像站,统统都不行了。 经过各大媒体报道,以及自己的亲身验证,才知道&#xff0c…

[imx6ull]Linux下的SocketCAN通信

文章目录 一、CAN总线协议1.简介2.电气属性3.通信原理①数据帧的帧格式:②总线同步③总线竞争④数据保护 二、Linux下CAN的操作1.硬件连接①CAN电平转换器②扩展板使用CAN 2.查询 can 信息3.开启/关闭 can4.发送/接收 can 数据5.设置 can 参数 三、CAN的回环测试四、…

Spring之SpringMVC源码

SpringMVC源码 一、SpringMVC的基本结构 1.MVC简介 以前的纯Servlet的处理方式: Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String type req.getParameter(Constant.REQUEST_PA…

Autodesk 3ds Max软件下载安装;3ds Max功能强大的三维建模、渲染软件安装包获取

3ds Max,无论是初学者还是资深设计师,都能通过3ds Max在数字世界中实现自己的创意,打造出令人惊叹的三维作品。 在3ds Max中,灯光系统是至关重要的一环。它提供了光度学灯光和标准灯光两种主要类型,用于照亮和增强场景…

预备知识----技术架构演进之路

单机架构 简介:应用服务和数据库服务共用一台服务器。 出现原因:出现在互联网早期,访问量较小,单机足以满足需求。 架构工作原理:通过应用(划分了多个模块)和数据库在单个服务器上写作完成业务…

Liunx环境下redis主从集群搭建(保姆级教学)01

Linux 环境安装redis 准备一台linux虚拟机 我使用基于Linux的开源类服务器操作系统CentOS7。 打开虚拟机,输入密码登录 下载linux版本的redis安装包 已经下载redis-5.0.10.tar.gz 创建一个文件夹用来安装redis,我在/opt目录下创建redis文件夹 将下载好的redis…

前端_调试工具_Chrome Devtools

目录 一、上左侧菜单功能 1.选择功能 2.手机/电脑 显示切换功能 3.内存 4.元素 5.控制台 6.源代码/来源 7.网络 8.应用 9.性能 10.安全 11.Lighthouse 12.记录器 13.性能数据分析 二、上右侧菜单功能 1.警告 2.设置 3....更多功能 谷歌浏览器自带了调试工具C…

AE电源pinnacle软件新款老款二款软件

AE电源pinnacle软件新款老款二款软件

数据中心运维管理方案

数据中心运维管理方案 随着数据中心在现代信息社会中的重要性日益增加,高效、可靠的运维管理方案成为保障其稳定运行的关键。本文将探讨数据中心运维管理的策略和实践,旨在为运维团队提供全面、系统的管理方法,确保数据中心在任何情况下都能…

(文章复现)低温环境下考虑电池寿命的微电网优化调度

参考文献: [1]丁佳昀,胡秦然,吴在军,等.低温环境下考虑电池寿命的微电网优化调度[J].中国电机工程学报,2024,44(10):3815-3824. 1.摘要 储能系统作为微电网重要组成部分,为微电网协调能量供需提供了解决方案。然而,在低温环境下&#xff0c…

抽象类接口(超详细)

抽象类&接口(超详细) 一:抽象类和抽象方法 封装:对象代表什么,就得封装对应的数据,并提供数据对应的行为 如果老师的work是教书,学生的work是学习。以前我们是在父类里面写一个work随便写一个方法体,然后子类重写。但是有一个弊端,如果子类不是你写的,是别人写…

嵌入式仪器模块:波形发生器模块(嵌入式)

• 16 位分辨率 • 125 MHz 刷新率 • 支持生成 FSK/ASK 信号 应用场景 • 生成任意标准波形或用户自定义波形 • 在特殊协议通信中模拟某个波形 • 无线充电(信号调制) 道114输出阻抗Low-ZLow-ZLow-Z输出范围 5 V 5 V 6 V耦合DCDCDC带宽4 MHz10 M…

第一个SpringBoot项目

目录 💭1、新建New Project IDEA2023版本创建Sping项目只能勾选17和21,却无法使用Java8?🌟 2、下载JDK 17🌟 💭2、项目创建成功界面 1、目录 🌟 2、pom文件🌟 💭3、…

C#操作MySQL从入门到精通(20)——更新数据

前言: 谈到数据库,大家最容易脱口而出的就是增删改查,本文所说的更新数据就是增删改查的改,改变数据的意思。 本文测试使用的数据库如下: 1、更新一列 所谓更新一列的意思就是只更改一列数据,并且通常要使用where条件,因为不加这个条件的话会导致将所有行的数据进行…

LeetCode:环形链表II

文章收录于LeetCode专栏 LeetCode地址 环形链表II 题目 给定一个链表,返回链表开始入环的第一个节点。如果链表无环,则返回null。   为了表示给定链表中的环,我们使用整数pos来表示链表尾连接到链表中的位置(索引从0开始&#…

vue3中进度条上加高亮圆点

实现效果 小圆点基于进度条定位&#xff08;left&#xff09;。 实现代码 <template><!-- 这块代码实现的功能&#xff1a;progressData遍历的年份进度数组&#xff0c;展示每年完成的进度--><ul><li v-for"(item, index) in progressData" :k…

LabVIEW 反向工程的实现与法律地位

什么是LabVIEW反向工程&#xff1f; 反向工程是指从现有的应用程序或软件中推导出其设计、架构、代码等信息的过程。对于LabVIEW而言&#xff0c;反向工程涉及从现有的VI&#xff08;虚拟仪器&#xff09;文件、项目或应用程序中提取出设计思路、功能模块、算法实现等。 LabV…

轻松上手MYSQL:SQL优化之Explain详解

​​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》《MYSQL应用》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 文章目录 一、Explain1.1 explain作用1.2 explain列说明idselect_typetableparti…