前端使用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
作者： NONO
出处：http://www.cnblogs.com/diligenceday/
企业网站：http://www.idrwl.com/
开源博客：http://www.github.com/sqqihao
QQ：287101329
微信：18101055830