ArrayBuffer和TypedArray，以及Blob的使用

时间 2019-11-29

标签 arraybuffer typedarray 以及 blob 使用繁體版

原文原文链接

　　前端使用TypedArray编辑二进制

　　ES6提供了， ArrayBuffer和TypedArray，让前端也能够直接操做编辑二进制数据，网页中的类型为file的input标签，也能够经过FileReader转化为二进制，而后再作编辑等，本文提供参考；html

　　ArrayBuffer : 表明内存之中的一段二进制数据，经过它咱们能够直接建立二进制对象，而后使用相关的方法和属性。前端

　　如何使用ArrayBuffer：html5

　　new ArrayBuffer(32)，从内存中申请32个字节；git

　　把ArrayBuffer转换为能够编辑的TypedArray，而后修改typedArray的内容，接着再把二进制的数据转化为blob类型的数据，再把blob对象转化为一个url数据，接着就能够把blob文件下载下来：es6

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：github

<!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数据，并打印出来：web

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字符串；app

　　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

做者： NONO
出处：http://www.cnblogs.com/diligenceday/
企业网站：http://www.idrwl.com/
开源博客：http://www.github.com/sqqihao
QQ：287101329
微信：18101055830