file、blob、base64相互转换
blob
blob转file
const blob = '.....'
const file = new File([blob], 'name.wav', {type: 'audio/wav'});
blob转base64
const blob = '.....'
const a = new FileReader();
a.readAsDataURL(blob);
a.onload = (e) => {
const base64 = e.target.result
}
blob转blobUrl
const blob = '.....'
window.URL = window.URL || window.webkitURL;
const blobURL = window.URL.createObjectURL(blob);
file
file转blob
const file = '.....'
const a = new FileReader();
a.readAsDataURL(file);
a.onload = (e) => {
const blob = new Blob([e.target.result], { type: file.type }) // 如果发现乱码检查一下type赋值的对不对
}
file转base64
const file = '.....'
const a = new FileReader();
a.readAsDataURL(file);
a.onload = (e) => {
const base64 = e.target.result
}
file转buffer
const file = '.....'
const buffer = fileReader.readAsArrayBuffer(file)
file转binary(二进制格式)
const file = '.....'
const buffer = fileReader.readAsBinaryString(file)
file转file(用于修改file的只读属性name、type、lastModified)
const newFile = new File([file], 'newName.wav', {type: 'audio/wav', lastModified: Date.now()})
base64
base64转file
const arr = base64.split(',')
const type = arr[0].match(/:(.*?);/)[1]
const size = window.atob(arr[1])
let n = size.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = size.charCodeAt(n)
}
const file = new File([u8arr], name, { type })
base64转blob
const arr = base64.split(',')
const type = arr[0].match(/:(.*?);/)[1]
const size = window.atob(arr[1])
let n = size.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = size.charCodeAt(n)
}
const blob = new Blob([u8arr], { type })
base64操作
const arr = base64.split(',')
const type = arr[0].match(/:(.*?);/)[1] // image/jpeg
const size = window.atob(arr[1]).length
base加解密 -- 不支持中文
场景:由于一些网络通讯协议的限制,必须对原数据进行编码后才可发送,后端得到后再解码得到原数据,例如,发送某些含有 ASCII 码表中 0 到 31 之间的控制字符的数据。
base转码
const base64 = window.btoa('a')
base解码
const string = window.atob(base64)
转载自:(64条消息) (前端)file、blob、base64相互转换_由本的博客-CSDN博客_前端file转base64
file、blob、base64相互转换的更多相关文章
- [转]DataURL与File,Blob,canvas对象之间的互相转换的Javascript
来源 http://blog.csdn.net/cuixiping/article/details/45932793 canvas转换为dataURL (从canvas获取dataURL) var d ...
- DataURL与File,Blob,canvas对象之间的互相转换的Javascript
canvas转换为dataURL (从canvas获取dataURL) var dataurl = canvas.toDataURL('image/png'); var dataurl2 = canv ...
- js实现图片的Blob base64 ArrayBuffer 的各种转换
一.相关基础知识 构造函数 FileReader() 返回一个新构造的FileReader 事件处理 FileReader.onabort 处理abort事件.该事件在读取操作被中断时触发. Fil ...
- UIImage与Base64相互转换
UIImage与Base64相互转换 采用第三方类 Address:https://github.com/l4u/NSData-Base64/ 经测试好用. 2013-07-17
- Base64转换二进制文件对象 Blob/Base64转换 File 对象
function convertBase64UrlToBlob(urlData) { var arr = dataurl.split(','),//去掉url的头,并转换为byte type = ar ...
- input file转base64
不想用canvas转 <input type="file" id="file" accept="image/*" onchange=& ...
- SVG & Blob & Base64
SVG & Blob https://developer.mozilla.org/en-US/docs/Web/API/Blob SVG & Base64 https://develo ...
- 使用HTML5的File实现base64和图片的互转
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS input file 转base64 JS图片预览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Java File 与 Bytes相互转换
public static byte[] fileToBytes(String filePath) { byte[] buffer = null; File file = new File(fileP ...
随机推荐
- Unity_UIWidgets - 组件AppBar
Unity_UIWidgets - 组件AppBar AppBar 构造 构造png观看 使用代码 使用效果 AppBar使用结束 结语 图标Icon QQ 今日无推荐 Unity_UIWidgets ...
- 遗传算法求TSP问题
一.实验内容及目的 本实验以遗传算法为研究对象,分析了遗传算法的选择.交叉.变异过程,采用遗传算法设计并实现了商旅问题求解,解决了商旅问题求解最合适的路径,达到用遗传算法迭代求解的目的.选择.交叉.变 ...
- scroll-view滚动导航自动居中
=> 代码片段:https://developers.weixin.qq.com/s/2fE1QWmE7xFR (复制在微信开发者工具打开) <!-- enable-flex ...
- DownKyi安装使用教程
哔哩下载姬 哔哩下载姬是一个简单易用的哔哩哔哩视频下载工具,具有简洁的界面,流畅的操作逻辑. 支持批量下载哔哩哔哩视频 支持批量下载bilibili视频. 哔哩下载姬可以下载几乎所有的B站视频,并输出 ...
- 分布式云原生平台Kurator v0.2.0正式发布!一键构建分布式云原生平台
摘要:北京时间2023年2月9日,Kurator 正式发布 v0.2.0 版本. 本文分享自华为云社区<分布式云原生平台Kurator v0.2.0正式发布!一键构建分布式云原生平台>,作 ...
- vscode + vim 快捷键
多行编辑 按V选中行,按大写I即可进入编辑模式 撤销恢复 CTRL + z 撤销 CTRL + shift + z 恢复 代码自动对齐 Alt + shift + f
- JavaScript 日期和时间的格式化
一.日期和时间的格式化 1.原生方法 1.1.使用 toLocaleString 方法 Date 对象有一个 toLocaleString 方法,该方法可以根据本地时间和地区设置格式化日期时间.例如: ...
- SPI的 CLK_POL和CLK_PHA
1.模式0(CPOL=0,CPHA=0) 模式0特性: CPOL = 0:空闲时是低电平,第1个跳变沿是上升沿,第2个跳变沿是下降沿 CPHA = 0:数据在第1个跳变沿(上升沿)采样 2.模式1(C ...
- 快学会这个技能-.NET API拦截技法
大家好,我是沙漠尽头的狼. 本文先抛出以下问题,请在文中寻找答案,可在评论区回答: 什么是API拦截? 一个方法被很多地方调用,怎么在不修改这个方法源码情况下,记录这个方法调用的前后时间? 同2,不修 ...
- JZOJ 5343. 【NOIP2017模拟9.3A组】健美猫
题面 其中 \(1 \leq n \leq 2 \times 10^6\) 分析 考虑每次移动,发现负数对答案贡献少 \(1\),非负数多 \(1\) 每次移动都加了 \(1\) 负数变非负数关键点在 ...