前端使用(yòng)TypedArray編輯二進制(zhì)
ES6提供了(le)， ArrayBuffer和(hé)TypedArray， 讓前∞₩α端也(yě)可(kě)以直接操作(zuò)編輯二進制(zh∞★ ì)數(shù)據， 網頁中的(de)類型為(wèi)file的(de♠€¶↕)input标簽， 也(yě)可(kě)以通(tōng)過File÷×←Reader轉化(huà)為(wèi)二進制(zhì)， 然後再做(zuò)編輯等， 本文(wén↓•≈)提供參考；
ArrayBuffer : 代表內(nèi)存↔☆♦ 之中的(de)一(yī)段二進制(zhì)數(shù)據， 通(tōng)過它我們可(k""ě)以直接創建二進制(zhì)對(duì)象，然後使用≈↑α∞(yòng)相(xiàng)關的(de)方法和(hé)屬性。
如(rú)何使用(yòng)ArrayBuffe♦♣r：
new ArrayBuffer(32)， 從(cóng)內(nèi₩£γ)存中申請(qǐng)32個(gè)字節；
把ArrayBuffer轉換為(wèi)可(kě)以編輯的(de)TypedAr✘πray， 然後修改typedArray的(de)內(n>≤γèi)容， 接著(zhe)再把二進制(zhì)的(de)數(shù)據轉化(huà)為(wèi)®£≥blob類型的(de)數(shù)據，再把blob對(duì)象轉化(huà)為(wèi)一(y≤♣ī)個(gè)url數(shù)據， 接著(zhe)就(jiù)可(kě)以把blob文(wén)™>件(jiàn)下(xià)載下(xià)來(lái)：
var ab = new ArrayBuffer(32) var iA = new Int8Array(ab) iA[0] = 97;//把二進制(zhì)的(de)數(shù)據的(de)首位•σ↕改為(wèi)97 ，97為(wèi)小(xiǎo)寫字母→±a的(de)ascll碼； var blob = new Blob([iA], {type: "application/octet-binary"});//把二進制(zhì)的(de)碼轉化(huàπ≥σ§)為(wèi)blob類型 var url = URL.createObjectURL(blob); windo¶'w.open(url)
網站(zhàn)上(shàng)類型為(wèi)file的(de)input如(rú)果選φ£©擇了(le)文(wén)件(jiàn)， 那(nà)麽input的"♠★(de)value其實就(jiù)繼承了(le)Blob數Ω↕→ (shù)據，測試demo：
<!DOCTYPE html> <html lang="en"> <head> <meta char×&set="UTF-8"> <title>Document</εβ≠title> </head> <bo₩ dy> <input type="file" id="f"> <script> var eF = document.getElementById("f"); eF.onchange = function() { var file = eF.files[0]; console.log(f ≈ile instanceof Blob) } </script> </body> </html>™
FileReader讀(dú)區(qū)blob文(wén)件€↓∏$(jiàn)
我們也(yě)可(kě)以使用(yòng)FileReader讀(dú)取←¶α•blob數(shù)據，并打印出來(lái)：
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.taγ£♥∏rget.result);//會(huì)輸出字符：a }); fr.↔←βreadAsText(blob)
blob轉化(huà)為(wèi)typedArray
如(rú)果要(yào)把blob文(wén)件(jiàn)轉化(huà)為(≈÷β£wèi)二進制(zhì)的(de)數(shù)據的(de)話(hβ♣≥uà)，要(yào)先把blob轉化(huà)為(wèi)arrayb¥♥uffer，然後再使用(yòng)typedArray就(jiù)可(kě)≈✔ 以直接編輯二進制(zhì)數(shù)據了(le)：
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文(wén)件(jiàn)轉化(huà)為(wèi)arrπ♥aybuffer； fr.readAsArrayBuffer(blob)
arraybuffer -->> typedarra βy -->> blob -->> blob通(tōng)過σ♣♥FileReader轉化(huà)為(wèi) arraybuffer或者tex屶t文(wén)本或者base64字符串；
arraybuffer和(hé)typedarray主要(yào)是(→•©shì)處理(lǐ)二進制(zhì)， 如(rú)果要(yào)把blob往二進制Ω∞α(zhì)轉換， 必須先把blob轉換為(wèi)arraybuffer， 然後再轉δ±β換為(wèi)可(kě)以編輯的(de)typedArray；
實際上(shàng)， 還(hái)有(yǒu)一(yī)種比較常用(yγ¥σòng)的(de)數(shù)據類型， base64編碼的(de)數(shù)據， 常用(y€÷òng)的(de)比如(rú)image的(de)base64的(de)編碼， 文(wénγα)本的(de)base64編碼等， 也(yě)可(kě)以把b±÷₽φase64的(de)編碼轉化(huà)為(wèi)對(duì)應的(de)aλ≤scll碼，再轉化(huà)為(wèi)typearray ，然後再生(shēn÷α&♠g)成blob對(duì)象：
function dataURLtoBlob(data φ★url) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr♠€ = new Uint8Array(n); //通(tōng)過atob把base64轉化(huà)₹£為(wèi)ascll碼， 然後再把ascll碼轉化(hu₩±à)為(wèi)字節碼 while(n--){ u8arr[n] = bstr.charCodeAt(n); } //u8ar↓•¶>r就(jiù)是(shì)2進制(zhì)的(de)數(shù)據 return new Blob([u8arr], {type:mime}); $₩ }
參考：
Blob：https://developer.mozilla.org/zh-CN/docs/Web/API§/Blob
TypeArray：https://developer.mozilla.org/en/doc≤¥★s/Web/JavaScript/Reference/Global_Objec ♥∑ts/TypedArray
ruanyifeng：http://es6.ruanyifeng.com/#do ↕↕cs/arraybuffer
typedArrays：https://www.html5rocks.com/enδ™/tutorials/webgl/typed_arrays/
base64：https://developer.mozilla.÷→•org/en-US/docs/Web/API/WindowB$↓ase64/Base64_encoding_and_decoding
base64字節碼原理(lǐ)：http://www.cnblogs.com/chengxiaohui/articles/•>>3951129.html
作(zuò)者： NONO
出處：http://www.cnblogs.com/diligenceday/
企業(yè)網站(zhàn)：/
開(kāi)源博客：http://www.github.com/sqqihao
QQ：287101329
微(wēi)信：18101055830
