JS二进制文件转换:File、Blob、Base64、ArrayBuffer

类型转换

1. Blob、File → Base64

function fileToDataURL(file) {let reader = new FileReader();reader.readAsDataURL(file);reader.onload = function (e) {return reader.result;};
}

2. Base64 → Blob、File

// Base64 转为 Blob
function dataURLToBlob(fileDataURL) {let arr = fileDataURL.split(","),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });
}// Base64 转为 File
function dataURLToBlob(fileDataURL, filename) {let arr = fileDataURL.split(","),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, { type: mime });
}

3. Blob、File → Object URL

// object:用于创建 URL 的 File 对象、Blob 对象
const objectUrl = URL.createObjectURL(object)

4. ArrayBuffer → Blob

const blob = new Blob([new Uint8Array(buffer, byteOffset, length)])

5. ArrayBuffer → base64

const base64 = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)))

6. Blob → ArrayBuffer

function blobToArrayBuffer (blob) { const reader = new FileReader()reader.readAsArrayBuffer(blob)reader.onload = () =>{return reader.result;}
}

7. Blob、File 文件数据绘制到 canvas

// 思路:Blob、File ——> dataURL(Base64) ——> canvas
function fileAndBlobToCanvas(fileDataURL) {let img = new Image()img.src = fileDataURLlet canvas = document.createElement('canvas')if (!canvas.getContext) {alert('浏览器不支持canvas')return}let ctx = canvas.getContext('2d')document.getElementById('container').appendChild(canvas)img.onload = function () {ctx.drawImage(img, 0, 0, img.width, img.height)}
}

8. 从 canvas 中获取文件 Base64

function canvasToDataURL() {let canvas = document.createElement('canvas')let canvasDataURL = canvas.toDataURL('image/png', 1.0)return canvasDataURL
}


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

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

相关文章

【服务器磁盘清理技巧】

服务器磁盘空间的管理是一个非常重要的系统管理员工作。大量的日志文件、临时文件、备份文件等可能会迅速填满你的磁盘空间,导致应用无法正常运行。因此,磁盘空间的清理和管理就显得非常重要。 本文将介绍一些在Linux服务器上清理磁盘空间的基本技巧。 …

Java开发的核心模式 - MVC

文章目录 1、MVC设计模式2、Web开发本质3、服务器的性能瓶颈 1、MVC设计模式 MVC设计模式示意图 在整个Java学习之旅中,MVC(Model-View-Controller)设计模式无疑占据着极其重要的地位,堪称理解和掌握Java项目开发精髓的钥匙。如…

Python Pandas处理金额注意事项和案例

使用 Python 的 Pandas 库处理金额时,有几个注意事项可以帮助确保准确性和避免常见的问题: 注意事项 使用适当的数据类型: 金额通常应该使用定点数来表示,以避免浮点数运算中的舍入误差。可以使用 decimal.Decimal 类型来保持高精度。 避免…

IP源防攻击IPSG(IP Source Guard)

IP源防攻击IPSG(IP Source Guard)是一种基于二层接口的源IP地址过滤技术,它能够防止恶意主机伪造合法主机的IP地址来仿冒合法主机,还能确保非授权主机不能通过自己指定IP地址的方式来访问网络或攻击网络。 2.1 IPSG基本原理 绑定…

关于delphi6提示[Fatal Error] File not found: ‘System.pas‘

关于delphi6提示[Fatal Error] File not found: System.pas 一、[Fatal Error] File not found: System.pas的原因 1、System.dcu的输出没有覆盖项目引用路径..\..\dcu下 2、注意事项:System.pas等源码不能赋值到..\..\dcu 3、下述控件的Tools-Environment Optio…

android嵌入式开发及实训答案,android面试简历模板

前言 本想今年辞掉工作大干一场,没想到碰到疫情,家里蹲了3个月…,还好字节能给一次机会。前阵子字节跳动的提前批开始了,看宣传是说有海量HC,机会多多,本着涨涨面经的心理,然后就投递了一下杭州…

如何利用ChatGPT搞科研?论文检索、写作、基金润色、数据分析、科研绘图(全球地图、植被图、箱型图、雷达图、玫瑰图、气泡图、森林图等)

以ChatGPT、LLaMA、Gemini、DALLE、Midjourney、Stable Diffusion、星火大模型、文心一言、千问为代表AI大语言模型带来了新一波人工智能浪潮,可以面向科研选题、思维导图、数据清洗、统计分析、高级编程、代码调试、算法学习、论文检索、写作、翻译、润色、文献辅助…

车规级存储芯片SPI NOR Flash

国产SPI NOR Flash厂家聚辰提供多种容量选择,可满足多种实时操作系统所需的不同存储空间;并且,拥有四种不同电压范围,分别为3V、1.8V、1.2V以及针对电池供电应用推出的1.65V~3.6V宽压供电的产品系列;同时,提…

【flask+python】利用魔术方法,更优雅的封装model类

定义model # Time :2024-2024/2/27-14:49 # Email :514422868qq.com # Author :Justin # file :user.py # Software :01-fishbook from app.model.base import Base from sqlalchemy import Column, Integer, SmallInteger, String from werkzeug.security …

深入浅出JVM(十七)之并发垃圾收集器CMS

上篇文章介绍用户线程与GC线程并发执行时可能产生的问题以及使用三色标记法演示原始快照和增量更新两种解决方案 这篇文章将主要介绍并发垃圾收集器中的CMS,其中CMS使用增量更新来解决对象消失问题,如果不了解增量更新的同学可以查看上篇文章深入浅出JV…

【k8s 高级调度--污点和容忍】

1、调度概念 在 Kubernetes 中,调度(scheduling)指的是确保 Pod 匹配到合适的节点, 以便 kubelet 能够运行它们。 抢占(Preemption)指的是终止低优先级的 Pod 以便高优先级的 Pod 可以调度运行的过程。 驱逐…

为什么会对猫毛过敏?如何缓解?浮毛克星—宠物空气净化器推荐

猫咪过敏通常是因为它们身上的Fel d1蛋白质导致的,这些蛋白质附着在猫咪的皮屑上。猫咪舔毛的过程会带出这些蛋白质,一旦接触就可能引发过敏症状,比如打喷嚏等。因此,减少空气中的浮毛数量有助于减轻过敏现象。猫用空气净化器可以…

Tomcat架构分析

Tomcat的核心组件 Tomcat将请求器和处理器分离,使用多种请求器支持不同的网络协议,而处理器只有一个。从而网络协议和容器解耦。 Tomcat的容器 Host:Tomcat提供多个域名的服务,其将每个域名都视为一个虚拟的主机,在…

【MySQL】_联合查询基础表

联合查询也称为多表查询,是将多个表联合到一起进行查询; 笛卡尔积是联合查询的基础,笛卡尔积其实就是一种排列组合,把两张表的记录尽可能地排列组合出n种情况: 以两张表:班级表与学生表为例,计…

半导体行业案例:Jira与龙智插件助力某半导体企业实现精益项目管理

近日,龙智Atlassian技术团队收到了国内一家大型半导体企业的感谢信。龙智团队提供的半导体行业项目管理解决方案和服务受到了客户的好评: 在龙智团队的支持下,我们的业务取得了喜人的成果和进步。龙智公司的专业服务和产品,是我们…

skiplist(高阶数据结构)

目录 一、概念 二、实现 三、对比 一、概念 skiplist是由William Pugh发明的,最早出现于他在1990年发表的论文《Skip Lists: A Probabilistic Alternative to Balanced Trees》 skiplist本质上是一种查找结构,用于解决算法中的查找问题,…

AI:145-智能监控系统下的行人安全预警与法律合规分析

🚀点击这里跳转到本专栏,可查阅专栏顶置最新的指南宝典~ 🎉🎊🎉 你的技术旅程将在这里启航! 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带关键代码,详细讲解供大家学习,希望…

【Redis】redis简介与安装

Redis 简介 Redis 是完全开源的,遵守 BSD 协议(Berkeley Software Distribution 意思是"伯克利软件发行版),是一个高性能的 key-value 数据库。具有以下几个比较明显的特点: 性能极高 – Redis能读的速度可以达…

2024年阿里云2核4G配置服务器测评_ECS和轻量性能测评

阿里云2核4G服务器多少钱一年?2核4G服务器1个月费用多少?2核4G服务器30元3个月、85元一年,轻量应用服务器2核4G4M带宽165元一年,企业用户2核4G5M带宽199元一年。本文阿里云服务器网整理的2核4G参加活动的主机是ECS经济型e实例和u1…

Vue3制作一个可拖拽的小箭头

效果图 可以抓住小箭头进行左右拖拽&#xff0c;不会做git图&#xff0c;所以只有静态效果QAQ 代码 <template><div class"tip"draggable"true"dragstart"start" //拖拽开始时drag"dragging" //拖拽种dragend "…