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相互转换的更多相关文章

  1. [转]DataURL与File,Blob,canvas对象之间的互相转换的Javascript

    来源 http://blog.csdn.net/cuixiping/article/details/45932793 canvas转换为dataURL (从canvas获取dataURL) var d ...

  2. DataURL与File,Blob,canvas对象之间的互相转换的Javascript

    canvas转换为dataURL (从canvas获取dataURL) var dataurl = canvas.toDataURL('image/png'); var dataurl2 = canv ...

  3. js实现图片的Blob base64 ArrayBuffer 的各种转换

    一.相关基础知识 构造函数 FileReader() 返回一个新构造的FileReader 事件处理 FileReader.onabort  处理abort事件.该事件在读取操作被中断时触发. Fil ...

  4. UIImage与Base64相互转换

    UIImage与Base64相互转换 采用第三方类 Address:https://github.com/l4u/NSData-Base64/ 经测试好用. 2013-07-17

  5. Base64转换二进制文件对象 Blob/Base64转换 File 对象

    function convertBase64UrlToBlob(urlData) { var arr = dataurl.split(','),//去掉url的头,并转换为byte type = ar ...

  6. input file转base64

    不想用canvas转 <input type="file" id="file" accept="image/*" onchange=& ...

  7. SVG & Blob & Base64

    SVG & Blob https://developer.mozilla.org/en-US/docs/Web/API/Blob SVG & Base64 https://develo ...

  8. 使用HTML5的File实现base64和图片的互转

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JS input file 转base64 JS图片预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. Java File 与 Bytes相互转换

    public static byte[] fileToBytes(String filePath) { byte[] buffer = null; File file = new File(fileP ...

随机推荐

  1. day01-SpringMVC基本介绍-01

    SpringMVC介绍-01 1.离线文档 解压 spring-5.3.8-dist.zip文件. 位置:spring-framework-5.3.8/docs/reference/html/web. ...

  2. Codeforces Round #851 (Div. 2) A-E

    比赛链接 A 题意 给一串只包含 \(1,2\) 的数,找到最小的 \(k\) 使得 \(\prod_{i=1}^k a_i = \prod_{i=k+1}^n a_i\) . 题解 知识点:枚举. ...

  3. 01Python变量的使用

    Python变量 变量的定义 变量:在程序运行过程中,值会发生变化的量 把程序运算的中间结果临时存到内存里,以备后面的代码继续调用,这几个名字的学名就叫做"变量". 变量的作用 我 ...

  4. 【译】.NET 7 中的性能改进(二)

    原文 | Stephen Toub 翻译 | 郑子铭 堆栈替换 (On-Stack Replacement) 堆栈替换 (OSR) 是 .NET 7 中最酷的 JIT 功能之一.但要真正了解 OSR, ...

  5. dvgis计算两点间距离的问题

    先贴一段代码,是dvgis里的distance.js源码,dvgis是cesium的二次封装,可以参考参考: 1import{Cesium}from'@dc-modules/namespace' 2i ...

  6. CentOS7一键安装RPM版LNMP(NGINX+PHP+MySQL)环境

    转载:简书 CentOS7一键安装RPM版LNMP(NGINX+PHP+MySQL)环境 - 简书 (jianshu.com) (需要配置nginx.conf文件) 转载:csdn (35条消息) V ...

  7. 基于Python的OpenGL 06 之摄像机

    1. 引言 本文基于Python语言,描述OpenGL的摄像机 前置知识可参考: 基于Python的OpenGL 05 之坐标系统 - 当时明月在曾照彩云归 - 博客园 (cnblogs.com) 笔 ...

  8. JavaScript之this、let、const关键字

    各场景下的this this的意思:百度翻译为:这.这么.本 在JavaScript中,表示当前对象的引用关键字,没有特殊含义. 在一个方法中,this表示该方法所属的对象. 如果单独使用,this表 ...

  9. corundum:100GNIC学习(三)——恢复工程

    前文:(一)https://www.cnblogs.com/shroud404/p/15364812.html (二)https://www.cnblogs.com/shroud404/p/15412 ...

  10. kubebuilder简明教程

    一.operator概述 Operator 是 Kubernetes 的扩展软件,它利用 定制资源 管理应用及其组件. Operator 遵循 Kubernetes 的理念,特别是在控制器 方面[1] ...