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 ...
随机推荐
- 【CTO变形记】有序定无序—为什么越努力,越无力
前言:我们用自己构建的认知结构来理解和映射这个世界,通过外界的反馈来调整现有的认知.但面对的现实越来越复杂,以及面对更多的未知且陌生的情况时,我们常常试图去"修整"接受到的信息 ...
- CodeSmith 简单使用和常用模板
1.简介 CodeSmith 是一种基于模板的代码生成工具,它使用类似于 ASP.NET的语法来生成任意类型的代码或文本. 2.软件布局 整体布局和visual studio系列相似,用过VS开发对此 ...
- 使用 DirectSound 录制麦克风音频
使用 DirectSound 录制麦克风音频 本文所有代码均可在以下仓库找到 https://gitcode.net/PeaZomboss/learnaudios 目录是demo/dscapture ...
- Vue3从基础到精通
目录 一.Vue3介绍 1. Vue3的变化 2. Vue2和Vue3的不同之处 二.Vue3创建项目 1.用vue-lci创建步骤 2.用vite创建步骤 三.setup函数 四.ref.react ...
- Python GDAL读取栅格数据并基于质量评估波段QA对指定数据加以筛选掩膜
本文介绍基于Python语言中gdal模块,对遥感影像数据进行栅格读取与计算,同时基于QA波段对像元加以筛选.掩膜的操作. 本文所要实现的需求具体为:现有自行计算的全球叶面积指数(LAI).t ...
- 3D场景建模零代码平台
3D场景建模软件(零基础.零代码.**),是指用来制作场景的软件,分为2D建模和3D建模,二者使用的技术及原理不同. 2D软件:它是用3维几何图形绘制出三维图形的软件,其主要功能是利用软件中已经画好的 ...
- 基于C++的OpenGL 06 之摄像机
1. 引言 本文基于C++语言,描述OpenGL的摄像机 前置知识可参考: 基于C++的OpenGL 05 之坐标系统 - 当时明月在曾照彩云归 - 博客园 (cnblogs.com) 笔者这里不过多 ...
- 分析总结一下所有有关打印题目的套路和思路:pat乙级:1109 擅长C, 1008元素循环右移,1050 螺旋矩阵,1027 打印沙漏等等
分析: 首先你要明白第一件事:所有要打印东西的题目打印都是从第一行到最后一行,从第一列到最后一列,你是没办法跳着打印的.可以看看其他几个打印题目1008元素循环右移,1050 螺旋矩阵1027 打印沙 ...
- sentry-sdk 使用
一.代码 import os import random import logging import sentry_sdk from sentry_sdk.tracing import Transac ...
- 洛谷P3933 Chtholly Nota Seniorious
题目 https://www.luogu.com.cn/problem/P3933 顺便:中国珂学院 思路 看到此题先大喊一声"我永远喜欢珂朵莉!" 好了然后我们思考一下如何做此题 ...