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