ArrayBuffer和TypedArray,以及Blob的使用

时间:2021-07-30 13:31:20

  前端使用TypedArray编辑二进制

  ES6提供了, ArrayBuffer和TypedArray, 让前端也可以直接操作编辑二进制数据, 网页中的类型为file的input标签, 也可以通过FileReader转化为二进制, 然后再做编辑等, 本文提供参考;

  ArrayBuffer : 代表内存之中的一段二进制数据, 通过它我们可以直接创建二进制对象,然后使用相关的方法和属性。

  如何使用ArrayBuffer:

  new ArrayBuffer(32), 从内存中申请32个字节;

  把ArrayBuffer转换为可以编辑的TypedArray, 然后修改typedArray的内容, 接着再把二进制的数据转化为blob类型的数据,再把blob对象转化为一个url数据, 接着就可以把blob文件下载下来:

var ab = new ArrayBuffer(32)
var iA = new Int8Array(ab)
iA[
0] = 97;//把二进制的数据的首位改为97 ,97为小写字母a的ascll码;
var blob = new Blob([iA], {type: "application/octet-binary"});//把二进制的码转化为blob类型
var url = URL.createObjectURL(blob);
window.open(url)

  网站上类型为file的input如果选择了文件, 那么input的value其实就继承了Blob数据,测试demo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file" id="f">
<script>
var eF = document.getElementById("f");
eF.onchange
= function() {
var file = eF.files[0];
console.log(file instanceof Blob)
}
</script>
</body>
</html>

  FileReader读区blob文件

  我们也可以使用FileReader读取blob数据,并打印出来:

var ab = new ArrayBuffer(32)
var iA = new Int8Array(ab)
iA[
0] = 97
var blob = new Blob([iA], {type: "application/octet-binary"});
var fr = new FileReader();
fr.addEventListener(
"load", function(ev) {
console.log(ev.target.result);//会输出字符:a
});
fr.readAsText(blob)

  blob转化为typedArray

  如果要把blob文件转化为二进制的数据的话,要先把blob转化为arraybuffer,然后再使用typedArray就可以直接编辑二进制数据了:

var ab = new ArrayBuffer(32)
var iA = new Int8Array(ab)
iA[
0] = 97
var blob = new Blob([iA], {type: "application/octet-binary"});
var fr = new FileReader();
fr.addEventListener(
"load", function(ev) {
var abb = ev.target.result;
var iAA = new Int8Array(abb);
console.log(iAA);
});
//把blob文件转化为arraybuffer;
fr.readAsArrayBuffer(blob)

  arraybuffer -->> typedarray -->> blob -->> blob通过FileReader转化为 arraybuffer或者text文本或者base64字符串;

  arraybuffer和typedarray主要是处理二进制, 如果要把blob往二进制转换, 必须先把blob转换为arraybuffer, 然后再转换为可以编辑的typedArray;

  实际上, 还有一种比较常用的数据类型, base64编码的数据, 常用的比如image的base64的编码, 文本的base64编码等, 也可以把base64的编码转化为对应的ascll码,再转化为typearray ,然后再生成blob对象:

function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr
= atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
//通过atob把base64转化为ascll码, 然后再把ascll码转化为字节码
while(n--){
u8arr[n]
= bstr.charCodeAt(n);
}
//u8arr就是2进制的数据
return new Blob([u8arr], {type:mime});
}

   

参考:

  Blob:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

  TypeArray:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/TypedArray

  ruanyifeng:http://es6.ruanyifeng.com/#docs/arraybuffer

  typedArrays:https://www.html5rocks.com/en/tutorials/webgl/typed_arrays/

  base64:https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

  base64字节码原理:http://www.cnblogs.com/chengxiaohui/articles/3951129.html

ArrayBuffer和TypedArray,以及Blob的使用作者: NONO
出处:http://www.cnblogs.com/diligenceday/
企业网站:http://www.idrwl.com/
开源博客:http://www.github.com/sqqihao
QQ:287101329
微信:18101055830