一、相关基础知识

构造函数

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>

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 ...

随机推荐

UEFI+GPT模式下的Windows系统中分区结构和默认分区大小及硬盘整数分区研究
内容摘要:本文主要讨论和分析在UEFI+GPT模式下的Windows系统(主要是最新的Win10X64)中默认的分区结构和默认的分区大小,硬盘整数分区.4K对齐.起始扇区.恢复分区.ESP分区.MSR ...
为什么微信android图片质量会比iphone的差？
为什么微信android图片质量会比iphone的差? 我们团队最初也纠结过这个问题,费了半天劲.绕了好大圈,直到最后才发现,原来这是谷歌犯得一个“小”错误,而且一直错到了今天. 谷歌的错就在于:li ...
transient关键字
transient关键字的英文意思是:瞬态,由此可见是瞬间的,不可固定的. 会不会与对象的状态等等有关系呢? 网上找了一下资料是跟对象的序列化有关. transient的作用一个对象只要实现了Ser ...
&period;NET基础之迭代器
使用foreach循环是有IEnumerator接口来实现的,IEnumerator即实现了迭代器,在foreach中如何迭代一个集合arrayList呢? 调用arrayLis.GetEnumber ...
javascript 版的 SuperMario
注册博客园4年了,还没发表过一篇文章.明年就是超级马里奥这款游戏诞生30周年了,作为一个喜欢2d卷轴游戏的玩家,决定用js实现一个.目前只实现了基本玩法,得分什么的也还没做.项目的GitHub的地址是 ...
css伪类选择器详细解析及案例使用-----伪元素
伪元素:(css3中将所有伪元素前变成了两个冒号,即::first-letter.::first-line.::before.::after.::selection.目的是为了区分伪元素与伪类.对于I ...
Docker网络解决方案 - Weave部署记录
前面说到了Flannel的部署,今天这里说下Docker跨主机容器间网络通信的另一个工具Weave的使用.当容器分布在多个不同的主机上时,这些容器之间的相互通信变得复杂起来.容器在不同主机之间都使用的 ...
[hihoCoder] &num;1158 &colon; 质数相关
时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述两个数a和 b (a<b)被称为质数相关,是指a × p = b,这里p是一个质数.一个集合S被称为质数相关,是指S中 ...
【扫盲】HTML5、Web APP、3G网站、Wap网站傻傻分不清楚
移动互联网指手机网站和app,其中app分为native app(原生app),web app(html5开发),Hybrid app(前两种app结合):手机网站分为wap网站和3g网 ...
Photo2
Story: 驯鹿:“其实我只是想要一个肩膀而已.” 小男孩:“当你需要我的时候,我会在你身边.” Profession: 页面的主色调是淡黄色,这种柔和的色调表达出了柔和的气氛,整个画面颜色的运用都 ...