JS中的二进制操作简介

经由过程File和Blob

在HTML5中供给了对表单的文件控件<input type="file" />更丰富的操作，可以经由过程inputDOM对象的.files来获取一个FileList，当然平日浏览器都只供给了单选的文件控件，于是这里都只会有一个File对象。别的，经由过程拖拽、剪贴板等方法也能获取到File或者Blob。

File持续了Blob，并供给了name, lastModifiedDate等基本元数据，然则依然是一个深度封装，不克不及直接获取到它的二进制。

Blob是Binary large object的缩写，它与ArrayBuffer的差别是除了raw bytes以外它还供给了mime type作为元数据。但它依然是无法直接被读写的。

这时刻须要借助FileReader的协助。FileReader供给了一组用来将Blob攫取为更为实用的类型的办法

readAsArrayBuffer() 
 
readAsBinaryString() 
 
readAsDataURL() 
 
readAsText()

例如

var file = get_file_some_how(); 
 
var fr = new FileReader(); 
 
fr.onload = function(e) { 
 
e.target.result; // 攫取的结不雅 
 
}; 
 
fr.readAsDataUrl(file); // readAsArrayBuffer

可以干什么呢?例如图片上传之前的本地预览(甚至基于canvas的编辑)等等都可以实现了。

Blob的其他构造办法多而杂，这里就先不到处搬运文档了。

花费二进制数据

何谓花费?最常见的方法也许就是经由过程XHR2直接把二进制数据以文件方法POST到办事端去。

这里我比较推荐应用FormData来构造POST数据。因为在办事端收的时刻会比较轻易一些，具体有兴趣可以去找找别人的例子。

固然直接提交ArrayBuffer也是可以的，然则这种时刻办事端收到的POST body会是一大年夜团，用起来不便利。如不雅要应用FormData来提交ArrayBuffer，须要先将其构造成Blob。

对Typed Array的构造留个心眼

RangeError: start offset of Int16Array should be a multiple of 2

当应用new xxxxxArray(arrayBuffer)这个重载进行构造的时刻，它会默认基于此ArrayBuffer进行构造。但当应用new xxxxArray(another_typed_array)这个重载的时刻，则是进行“拷贝构造”，如许两个Typed Array会指向不合的buffer，须要留意这是否相符预期。

如不雅须要基于同一个ArrayBuffer来构造Typed Array，可以应用Typed Array的buffer, byteLength,byteOffset来获取它背后的ArrayBuffer。

Tips(坑)

可以看出，如不雅要手工构造膳绫擎的测试数据ArrayBuffer，用Uint8Array就会很便利(呃事实上这是我小我最常用的一种Typed Array)。

对内存对齐留个心眼

当应用ArrayBuffer来构造Typed Array的时刻，可以指定byteOffset参数，例如

膳绫擎的代码就能以buffer向后偏移10字节处为起点来构造Int16Array，然则如不雅将10设置为一个奇数，会发明如下缺点：

这是因为Typed Array对内存对齐有请求，它不克不及在非对齐的地位建立，同理，Uint32Array和Int32Array则请求偏移量是4字节对齐的。

是以如不雅你欲望在非对齐的地位进行读写，则须要借助DataView的协助。

对字节序留个心眼

我们日常中所写的法度榜样，几乎都不须要关怀字节序，是以这个问题没那么严重，知道本身的法度榜样会有字节序问题的人，开辟到这里也肯定会知道问题的存在，但这里照样稍微提一下。

按照MDN的说法，Typed Array只会应用当前平台的字节序，例如我们如今用的桌面电脑不论PC照样Mac都是x86/x64的，也就是little-endian了。

应用DataView，不仅可以解决膳绫擎说到的内存对齐的问题，还可以指决定肯定写时的字节序，具体参数都在文档琅绫擎了，就不搬运了。

应用DataView合营Typed Array也可以做到一个检测当前平台字节序的技能：

function isLittleEndian() { 
 
var buf = new ArrayBuffer(2); 
 
var view = new DataView(buf); 
 
view.setInt16(0, 256, true);//显式以little endian写入数据 
 
// 此时buf里的内存构造应当是 00 01 
 
	
			 2/3   首页 上一页 1 2 3 下一页 尾页	
			

　　推荐阅读
　　无线墨仓混战 为何GT5820脱颖而出？
            
            加墨式也好，墨仓式也罢，这一类产品已经敏捷成为市场上的核心，无论是家里照样几小我的小公司，一分钱一张的打印成本让用户异常爱好，惠普、佳能、兄弟在以前两年纷纷推出产品，没有再让>>>详细阅读


本文标题：JS中的二进制操作简介
地址：http://www.17bianji.com/lsqh/34714.html
 1/2    1