js实现图片的Blob base64 ArrayBuffer 的各种转换
一、相关基础知识
构造函数
FileReader() 返回一个新构造的FileReader
事件处理
FileReader.onabort 处理abort事件。该事件在读取操作被中断时触发。
FileReader.onload 处理load事件。该事件在读取操作完成时触发。
FileReader.onloadstart 处理loadstart事件。该事件在读取操作开始时触发。
FileReader.onloadend 处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发。
FileReader.onprogress 处理progress事件。该事件在读取Blob时触发。\
方法：
FileReader.readAsArrayBuffer() 一旦完成，result属性中将包含所读取文件的原始二进制数据。
FileReader.readAsDataURL () 一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
FileReader.readAsText () 一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。
Window atob() 方法
atob()方法用于解码使用 base-64 编码的字符串。
window.atob(encodedStr) 该方法返回一个解码的字符串。
charCodeAt() 方法
charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
//在字符串 "Hello world!" 中，我们将返回位置 1 的字符的 Unicode 编码：
var str="Hello world!"
document.write(str.charCodeAt(1)) //以上代码的输出是：101
ArrayBuffer 与 Blob
ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。Blob (binary large object)，二进制大对象，是一个可以存储二进制文件的容器。
Blob是一个大文件，典型的Blob是一张图片或者一个声音文件，由于他们的尺寸，必须使用特殊的方式来处理
var blob = new Blob(dataArr:Array<any>, opt:{type:string});
- dataArray：数组，包含了要添加到Blob对象中的数据，数据可以是任意多个ArrayBuffer，ArrayBufferView， Blob，或者 DOMString对象。
- opt：对象，用于设置Blob对象的属性（如：MIME类型）
ArrayBuffer转Blob
// arraybuffer转blob很方便，作为参数传入就行了。
var buffer = new ArrayBuffer(16)
var blob = new Blob([buffer]) //注意：一定要用方括号包住
Blob转ArrayBuffer
此处需要借助fileReader对象:
var blob = new Blob([1,2,3,4,5])
var reader = new FileReader()
reader.readAsArrayBuffer(blob)
reader.onload = function() {
console.log(this.result)
}
// 控制台输出的则是ArrayBuffer的数据了。
ArrayBuffer和Blob一样，都是二进制数据的容器，而ArrayBuffer相比更为底层，他可以去操作去修改这些二进制值，这两者之间也是可以互转的。
二、js实现图片资源，Blob base64 ArrayBuffer 的各种转换
html
<body>
<input type="file" id="shangchuan" onchange="filechange()">
<div class="tup">
<img id="img" src="">
</div>
</body>
js
ArrayBuffer转Blob
function filechange(){
let files = document.getElementById("shangchuan").files[0];
let type = files.type
console.log("files",files)
geturl(files,type)
}
function geturl(files,type){
let reads = new FileReader();
reads.readAsArrayBuffer(files);
reads.onload = function(e){
console.log(reads.result)
console.log(new Blob([reads.result],{'type':type}))
// 注意：里面的this指的就是reads，所以reads.result == this.result
//document.getElementById("img").src = this.result;
}
}
文件转BASE64
function getBase64(File,callback){
var reader = new FileReader(); //IE10+
var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败
var File = File||$("#shangchuan").get(0).files[0]; //获取上传的文件对象
/*
FileList {0: File, 1: File, length: 2} 多个文件
File:{name: "fan.jpg", lastModified: 1559019043288, lastModifiedDate: Tue May 28 2019 12:50:43 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 3346145, type: "image/jpeg"}
FileList {0: File, 1: File, length: 2} 单个文件
*/
if (File) {
//读取指定的 Blob 或 File 对象 触发loadend 事件 并将图片的base64编码赋值给result
reader.readAsDataURL(File);
//reader.readAsText(File)
//异步通信 回调函数返回
reader.onload = function (e) {
//var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分（可选可不选，需要与后台沟通）
if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
alert( '上传失败，请上传不大于2M的图片！');
return;
}else{
var base64Data=reader.result;
//返回base64编码
callback(base64Data);
}
}
}
}
BASE64转文件
function Base64toFile(dataurl, filename) {//将base64转换为文件
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
base64转blob
方法一
function convertBase64UrlToBlob(base64){
var type =base64.split(",")[0].match(/:(.*?);/)[1];//提取base64头的type如 'image/png'
var bytes=window.atob(base64.split(',')[1]);//去掉url的头，并转换为byte (atob:编码 btoa:解码) //处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);//通用的、固定长度(bytes.length)的原始二进制数据缓冲区对象
//var ia = new Uint8Array(bytes.length);
for (var i = 0; i < bytes.length; i++) {
ab[i] = bytes.charCodeAt(i);
}
let blob = new Blob( [ab] , {type :type});
console.log(blob)
}
方法二
function convertBase64UrlToBlob(base64){
var type =base64.split(",")[0].match(/:(.*?);/)[1];//提取base64头的type如 'image/png'
var bytes=window.atob(base64.split(',')[1]);//去掉url的头，并转换为byte (atob:编码 btoa:解码) //处理异常,将ascii码小于0的转换为大于0
//var ab = new ArrayBuffer(bytes.length);//通用的、固定长度(bytes.length)的原始二进制数据缓冲区对象
var ia = new Uint8Array(bytes.length);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
let blob = new Blob( [ia] , {type :type});
console.log(blob)
}
blob转base64
function blobToBase64(blob, callback) {
let a = new FileReader();
a.onload = function (e) { callback(e.target.result); }
a.readAsDataURL(blob);
}
通过XHR的方法来转转Blob
let xhr = new XMLHttpRequest();
xhr.open("get", "http://mybg.oss-cn-hangzhou.aliyuncs.com/2019031510452423", true);
xhr.responseType = "blob";
xhr.onload = function (res) {
if (this.status == 200) {
var blob = this.response;
}
}
xhr.send();
js实现图片的Blob base64 ArrayBuffer 的各种转换的更多相关文章
- js 压缩图片 上传
感谢,参考了以下作者的绝大部分内容 https://blog.csdn.net/tangxiujiang/article/details/78755292 https://blog.csdn.net/ ...
- JS实现图片base64转blob对象，压缩图片，预览图片，图片旋转到正确角度
base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...
- 聊聊JS的二进制家族：Blob、ArrayBuffer和Buffer
事实上,前端很少涉及对二进制数据的处理,但即便如此,我们偶尔总能在角落里看见它们的身影. 今天我们就来聊一聊前端的二进制家族:Blob.ArrayBuffer和Buffer 概述 Blob: 前端的一 ...
- js压缩图片base64长度
var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...
- JS将图片转换成Base64码
直接上代码 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- JS压缩图片（canvas），返回base64码
上传图片时总会遇到图片过大上传不上去的问题,本方法是在网上搜的压缩图片的例子,我测试过了,确实能用,但是照搬别人的代码,发现压缩后图片会失真,不清晰,现经修改图片清晰度还可以,不仔细看差别不大,so, ...
- JS将本地图片转化成base64码
在图片上传的时候,有时候后台需要前台上传base64文件,这时候我们就需要将图片资源转化成base64,下面这段js代码就可实现此功能. 1.首先在html里定义一个input输入框: BASE64图 ...
- js 获取图片url的Blob值并预览
1)使用 XMLHttpRequest 对象获取图片url的Blob值 //获取图片的Blob值 function getImageBlob(url, cb) { var xhr = new XMLH ...
- [转]JS将图片转为base64编码
本文转自:https://blog.csdn.net/DeMonliuhui/article/details/79731359 1.根据img标签获取base64编码/** * * @param im ...
随机推荐
- Ionic app IOS 在Xcode 模拟运行 真机调试
1. 创建项目: sudo ionic start myApp tabs 2 cd 到刚才创建的项目 3. sudo ionic cordova platform add ios 把 ios 环境添加 ...
- GANomaly: Semi-Supervised Anomaly Detection via Adversarial Training-1-论文学习
通过对抗训练实现半监督的异常检测 Abstract 异常检测在计算机视觉中是一个经典的问题,即从异常中确定正常,但是由于其他类(即异常类)的样本数量不足,所以数据集主要基于一个类(即正常类).虽然该问 ...
- WPF窗体自适应分辨率
使用WPF创建一个窗体(Window)时,如果设置了固定的高度(Height)和宽度(Width),一旦用户的电脑分辨率过低,就会使得窗体及其中的内容无法完整地显示出来.要解决这个这个问题,有以下几个 ...
- Linux的桌面虚拟化技术KVM（五）——virsh常用命令
Linux的桌面虚拟化技术KVM(一)——新建KVM虚拟机 Linux的桌面虚拟化技术KVM(二)——远程桌面管理 Linux的桌面虚拟化技术KVM(三)——KVM虚拟机克隆和快照 Linux的桌面虚 ...
- Django安全配置(settings.py)详解
必须配置项 PASSWORD_HASHER 这个配置是在使用Django自带的密码加密函数的时候会使用的加密算法的列表.默认如下: PASSWORD_HASHERS = ( 'django.contr ...
- （一）IDEA修改HTML不生效（未热部署）
一.问题 IDEA 版本:2018.1.2 项目类型:SpringBoot 描述 : 修改JSP文件内容时,不会热部署,需要每次都重启项目才生效. 二.解决方案 加入Springboot开发者工具,即 ...
- 【JS新手教程】JS获取当前星期几的几种方法
该文通过获取星期几的几种方法,介绍JS里的数组,判断,和字符串截取,可以当作新手教程看,小白也看的懂.获取星期几,可通过Date()对象的getDay()获取,获取的是一个数字,对应的是0,1,2,3 ...
- 看看该死的jquery.form.js的用法，不是个东西
$("#btnReg").click(function () { var options = { //target: '#output', // 把服务器返回的内容放入id为out ...
- Static和Const的区别
static static局部变量 将一个变量声明为函数的局部变量,那么这个局部变量在函数执行完成之后不会被释放,而是继续保留在内存中 static 全局变量 表示一个变量在当前文件的全局内可访问 s ...
- LeetCode 515. 在每个树行中找最大值(Find Largest Value in Each Tree Row)
515. 在每个树行中找最大值 515. Find Largest Value in Each Tree Row 题目描述 You need to find the largest value in ...