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 ...
随机推荐
- 在elasticsearch中简单的使用script_fields
目录 1.背景 2.准备数据 2.1 mapping 2.2 插入数据 3.案例 3.1 格式化性别 1-男 2-女 -1-未知 如果不存在sex字段,则显示-- 其余的显示 ** 3.1.1 dsl ...
- touchke变化值小的解决办法
方法一,提高主频 方法二,减小充电时间. 方法三,充电电流减半(具体看RM手册touchkey章节) 建议测试时采样值维持在3000-4000 其实以上操作就是增大Y轴间隔,以增大按下和未按下时的采样 ...
- Selenium中对于颜色的处理及拓展
Selenium中对于颜色的处理及拓展 获取百度一下按钮的背景色 from selenium import webdriver from time import sleep driver = webd ...
- shin-monitor源码分析
在经过两年多的线上沉淀后,将监控代码重新用 TypeScript 编写,删除冗余逻辑,正式开源. 根据 shin-monitor 的目录结构可知,源码集中在 src 目录中.关于监控系统的迭代过程,可 ...
- 线程基础知识16-线程相关类CyclicBarrier、Semaphore、Exchanger
1 CyclicBarrier 1.1 作用 从字面上的意思可以知道,这个类的中文意思是"循环栅栏".大概的意思就是一个可循环利用的屏障. 它的作用就是会让所有线程都等待完成后才会 ...
- mysql02-配置文件my.ini
https://www.cnblogs.com/isme-zjh/p/11542106.html 1.mysql安装-连接 1.1安装 略 1.2连接-退出 连接 mysql –h 主机 ...
- 树莓派读取ip
# -*- coding:utf-8 -*- #@author:YouLei #@time:2020/05/27=11:20 import time import socket time.sleep( ...
- SpringBoot 整合Thymeleaf 、Thymeleaf常用标签
springboot 整合Thymeleaf Thymeleaf是目前流行的视图层的技术,Spring boot 官方推荐的使用Thymeleaf 什么是Thymeleaf? Thymeleaf是一个 ...
- Stable Diffusion魔法入门
写在前面 本文为资料整合,没有原创内容,方便自己查找和学习, 花费了一晚上把sd安装好,又花了大半天了解sd周边的知识,终于体会到为啥这些生成式AI被称为魔法了,魔法使用前要吟唱类比到AI上不就是那些 ...
- 0x04_My-OS实现自定义颜色
前言: 0x03我们提到: 把12(红色)用循环写入显存,每个像素点怎么显示都要看对应的显存地址,比如0xa0000到0xaffff就是每一个像素点的显存 你问为什么12就是红色,这些东西在主板出厂的 ...