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. 【随笔记】NDK 编译开源库 SQLite3

    NDK 编译环境搭建请参考:[工作笔记]NDK 编译开源库 nghttp2/openssl/curl_lovemengx的博客-CSDN博客 一.下载源代码 wget https://github.c ...

  2. Node.js学习笔记----day04之学生信息管理系统

    认真学习,认真记录,每天都要有进步呀!!! 加油叭!!! 一.起步 项目结构 安装需要的包 初始化显示index.html index.html var express = require('expr ...

  3. Java CompletableFuture 异步超时实现探索

    作者:京东科技 张天赐 前言 JDK 8 是一次重大的版本升级,新增了非常多的特性,其中之一便是 CompletableFuture.自此从 JDK 层面真正意义上的支持了基于事件的异步编程范式,弥补 ...

  4. 5.安装&卸载子应用 投票

    另起一个新的Django项目 djangoProject_poll_test ........ 把.tar.gz包下载到某个路径 D:\此电脑下分类\桌面\django-polls\dist\djan ...

  5. 2021级《JAVA语言程序设计》上机考试试题7

    现在是学生查看,重置密码,原来是搜索,现在直接浏览,直接重置密码,改了下 代码如下: <%@ page language="java" contentType="t ...

  6. Java7.10

    很不能理解以下代码的问题???

  7. 字符串、函数、bug

    字符串 字符串驻留机制 仅保存一份相同且不可变字符串的方法,不同的值别存放在字符串的驻留池中,Python的驻留机制对相同的字符串只保留一份拷贝,后续穿件相同的字符串时,不会开辟新的空间,而是把字符串 ...

  8. Redis(安装、启动、测试、环境)

    Redis 概述: Redis(Remote Dictionary Server ),即远程字典服务,是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数 ...

  9. vant组件,picker时间选择,自定义时间选择,实现datePacker,时间选择长期,增加长期选项,用于选择身份证到期时间等...

    vant组件,picker时间选择,自定义时间选择,实现datePacker,时间选择长期,增加长期选项,用于选择身份证到期时间等... 最近项目中有个需求,datePicker选项,需要实现增加一个 ...

  10. CF335F Buy One, Get One Free

    \(\text{Solution}\) 其实不想写(因为不好写... 所以贴贴 \(\text{Solution}\) 然而就关于这题而言讲得也不太清楚 可撤销贪心就是维护当前状态的最优解,同时考虑以 ...