js实现图片的Blob base64 ArrayBuffer 的各种转换

2024-02-08 17:39:34

一、相关基础知识

构造函数

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();

码农公寓

Window atob() 方法

charCodeAt() 方法

相关文章