前端使用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}); }
-
發送二進制數據
var oReq = new XMLHttpRequest(); oReq.open("POST", url, true); oReq.onload = function (oEvent) { // Uploaded. }; var blob = new Blob(['abc123'], {type: 'text/plain'}); oReq.send(blob);
或者
var myArray = new ArrayBuffer(512); var longInt8View = new Uint8Array(myArray); for (var i=0; i< longInt8View.length; i++) { longInt8View[i] = i % 255; } var xhr = new XMLHttpRequest; xhr.open("POST", url, false); xhr.send(myArray);
-
接收二進制數據
var oReq = new XMLHttpRequest(); oReq.open("GET", "/myfile.png", true); oReq.responseType = "arraybuffer"; oReq.onload = function (oEvent) { var arrayBuffer = oReq.response; // Note: not oReq.responseText if (arrayBuffer) { var byteArray = new Uint8Array(arrayBuffer); for (var i = 0; i < byteArray.byteLength; i++) { } } }; oReq.send(null);
如上設置只能是文本類型，如果是Blob類型：
var oReq = new XMLHttpRequest(); oReq.open("GET", "/myfile.png", true); oReq.responseType = "arraybuffer"; oReq.onload = function(oEvent) { var blob = new Blob([oReq.response], {type: "image/png"}); // ... }; oReq.send();
或者
var oReq = new XMLHttpRequest(); oReq.open("GET", "/myfile.png", true); oReq.responseType = "blob"; oReq.onload = function(oEvent) { var blob = oReq.response; // ... }; oReq.send();
舊版本的瀏覽器：
function load_binary_resource(url) { var req = new XMLHttpRequest(); req.open('GET', url, false); //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com] req.overrideMimeType('text\/plain; charset=x-user-defined'); req.send(null); if (req.status != 200) return ''; return req.responseText; }
相關鏈接：