JS幻想 读取二进制文件第1/2页

且不说浏览器内置的HTTP插件是否支持二进制数据流，就JavaScript其自身就毫无二进制的处理能力。聪明的读者也许想说用VBScript就可以实现了。不错，因为VBScript，IE，ActiveX都是微软的产物，所以他们有着无缝的结合。IE的HTTP组件确实能够读取二进制数据，而且也只能够让VBScript读取。但对于其他浏览器，就束手无策了。

毕竟脚本的理念仅仅是用来处理一些简单的交互的，对于处理字节流之类的复杂问题完全不该是脚本的职责。不过作为一种探索，我们还是可以挖掘下其中的乐趣。当然，首先要明确的是，对于二进制的读取JS确实是无能为力的，不过我们可以来模拟，以达到相同的效果，下面就跟着我来吧。

比如现在想要做个推箱子的小游戏，共200关。这时唯一值得考虑到事就出现了：把这200关地图数据保存在何处？如果直接硬塞在一个脚本文件里似乎显得太大，或者单独保存在一个文件里，但是用什么格式。。。不过对于推箱子游戏来说简单的文本格式也够了，但对于一些地图较复杂的也许就会使用BASE64编码，然后由客户端的HTTP组件下载下来解码使用。BASE64编码在JS中还是很常用的，毕竟它不受任何的环境限制，能够处理字符串就行。

既然有个BASE64，那为什么就不能有BASE128，BASE256了呢？如果能实现“BASE256”，岂不就是二进制字节流了？如果真可以如此，那这种方法早就流传开了，还留着那么多的BASE64做什么：）毕竟这是字符串，而不叫字节串，那肯定是有区别的。不妨把一个二进制的文件，当作文本文件读取回来试试，很快你就会发现超过一旦文件中出现127（0x7F）以上的字符，马上就出错了；如果存在个0x00字节的话，后面的内容都会荡然无存，这意味着256个字符中能够利用的还不到一半。

然而，可别忘了这个测试使用的仅仅是最基本的ASCII编码，对于功能强大的XMLHTTP支持的也绝不仅限于如此，那么就试试Unicode字符会怎样。在记事本随便输几个字符，保存为Unicode格式的文本文件。这时用XMLHTTP读取，显示出来的与记事本里的一模一样，但是再用16进制编辑器打开此文件时，就大不相同了。在文件的开头出现了FF FE两字节，后面的每个内容都是由一个0隔开。毕竟这是16位的Unicode字符，除了基本的ASCII外，还要保存各国的文字。例如一个中文就占用了2个字节，而英文数字仍然占用2字节，只是高位由0填充罢了（注意高位字节是在低位字节后面的）。
XMLHTTP能够成功显示出来就说明Unicode还是支持的。现在试着修改文件里面的数据，看看超过了那些范围才会出错。把数据修改成如下：FFFE 0001 0203 7F00 8000 8100 FF00 FFFF。用XMLHTTP测试，虽然显示的都是乱码，但并没出错，返回的字符串用charCodeAt(i)及toString(16)方法一试，原形毕露！几经测试，Unicode并不像ASCII那样有范围限制，但唯独一个例外：0x0000！
众所周知，0x00就是ASCII的结束标志。但到了Unicode的世界里一切都是16位的，因此字符尾也成了0x0000。到了这里似乎有点遗憾，但接着的目标很明确：如果能够去掉文件中的0x0000，并在之前加上0xFEFF，就能够让JavaScript读取了。

去掉以及恢复，不妨就称他编码与解码吧。编码的方法就见智见仁了，最简单的办法就是记录下每个0x0000的位置，然后除去；在客户端按照记录的位置再复原回去。虽然简单，但也别忘了，0x00在二进制文件中是相当多的，即便是0x0000也是。这样光是记录他们的内容就有很多，显然不是很好。既然说到要记录，为何一定要记录0x0000的位置？反过来想，我们应该记录这个文件中出现次数最少的字符，以及它的位置，然后把0x0000的地方替换成这个字符；解码的时候一旦出现这个字符，但当前位置又不在记录中，就可以确定这就是个0x0000。事实上，在64K以下的文件中肯定有个字符根本就不会出现的（为什么仔细考虑下就明白），即使是在64K以上，还是有非常多的文件不存在某个字符的。毕竟一个Unicode字符有65536之多，很少有文件会把他们全都用上，除非是个冗余极小的压缩文件，但也不会很多。

到此，编码解码思路已明了，剩下自然是实现他们。
刚才提到了源文件中出现最少（甚至是没有）的Unicode字符，不妨就称作key
首先来定义新生成的二进制文件头格式：


代码如下:

00 01 0xFEFF。 Unicode文件头，这是必须的
02 03 Key值。 为了不让0x0000成为Key，在寻找的过程中忽略0x0000
03 04 Key出现的次数+1。 +1是为了避免该位置出现0x0000，后面的也都一样
05 06
07 08 第1个Key的位置 用4字节保存每个Key的位置。
09 0A
0B 0C 。。。
0D 0E
0F 10 第n个Key的位置
11 12 文件数据内容。。。

当前1/2页 12下一页阅读全文

赞 (0)

相关推荐

  • JavaScript读二进制文件并用ajax传输二进制流的方法

    综合网上多个教程,加上自己实践得出的方法,目前能够兼容谷歌.IE11.IE10. htmlbody里的内容,没什么特殊的. <div id="dConfirm"> <p style="float: left;margin-left: 20px;margin-top: 20px"> <form action="javascript: uploadAndSubmit();" name="demoForm&quo

  • js 显示base64编码的二进制流网页图片

    Data URI scheme. Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入.比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张2*2的白色gif图片. 在上面的Data URI中,data表示取得数据的协定名称,image/gif是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/gif文件base64编码后的数据. 目前,Data URI sc

  • Node.js中使用Buffer编码、解码二进制数据详解

    JavaScript很擅长处理字符串,但是因为它最初的设计是用来处理HTML文档,因此它并不太擅长处理二进制数据.JavaScript没有byte类型,没有结构化的类型(structured types),甚至没有字节数组,只有数字和字符串.(原文:JavaScript doesn't have a byte type - it just has numbers - or structured types, or http://skylitecellars.com/ even byte arra

  • javascript十六进制及二进制转化的方法

    本文实例讲述了javascript十六进制及二进制转化的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • Ajax发送和接收二进制字节流数据的方法

    HTML5 Ajax 2.0标准中,增强了Ajax的许多功能,包括发送FormData数据,上传数据进度条等诸多功能.但实际上,Ajax可以字节发送二进制数据. 发送二进制数据 var oReq = new XMLHttpRequest(); oReq.open("POST", url, true); oReq.onload = function (oEvent) { // Uploaded. }; var blob = new Blob(['abc123'], {type: 'tex

  • JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)

    var a='11160'; alert(parseInt(a,2)); //将111做为2进制来转换,忽略60(不符合二进制),从左至右只将符合二进制数的进行转换 alert(parseInt(a,16)); //将所有的都进行转换 依照此方法,其实可以转换成任何进制 var a='1110'; alert(parseInt(a,10).toString(16)); //将A转换为10进制,然后再转换成16进制 同样也可以是其它进制 下面说下ASCII 码: function test(){

  • jscript读写二进制文件的方法

    本文实例讲述了jscript读写二进制文件的方法.分享给大家供大家参考.具体实现方法如下: var bin = new Array(256); for(var i=0;i<256;i++){ bin[i]=String.fromCharCode(i); } function TestWrite(){ var Stream = new ActiveXObject("ADODB.Stream"); var adTypeBinary=1,adTypeText=2; Stream.Typ

  • JS幻想 读取二进制文件第1/2页

    且不说浏览器内置的HTTP插件是否支持二进制数据流,就JavaScript其自身就毫无二进制的处理能力.聪明的读者也许想说用VBScript就可以实现了.不错,因为VBScript,IE,ActiveX都是微软的产物,所以他们有着无缝的结合.IE的HTTP组件确实能够读取二进制数据,而且也只能够让VBScript读取.但对于其他浏览器,就束手无策了. 毕竟脚本的理念仅仅是用来处理一些简单的交互的,对于处理字节流之类的复杂问题完全不该是脚本的职责.不过作为一种探索,我们还是可以挖掘下其中的乐趣.当

  • 使用Vue.js创建一个时间跟踪的单页应用

    Vue.js很简单.正因为如此简单,人们常常认为其适合于小项目.虽然真正的Vue.js核心知识只是一个视图层库,实际上有一组工具,将使您能够使用Vue.js构建完整的大规模SPA(单页应用程序). SPA应用可以在不完全重新加载网页,产生一个更流畅的用户体验到的用户交互响应.还有好的副作用,SPA还鼓励后端专注于展示数据端点,这使得整体架构更加分离,并且对于其他类型的客户端可能是可重用的. 从开发人员的角度来看,SPA和传统的后端呈现应用程序之间的主要区别是,我们必须将客户端视为具有自己架构的应

  • js与jquery分别实现tab标签页功能的方法

    本文实例讲述了js与jquery分别实现tab标签页功能的方法.分享给大家供大家参考,具体如下: 首先列出样式和html标签 <style type="text/css"> *{margin: 0;padding: 0;} #myul li {list-style: none; float: left; border: 1px solid #ddd; width: 100px; height: 20px; text-align: center; line-height: 2

  • JS实现的3D拖拽翻页效果代码

    JS实现的3D拖拽翻页效果代码

    本文实例讲述了JS实现的3D拖拽翻页效果.分享给大家供大家参考,具体如下: 以前看到一个很火的帖子,拖拽实现的翻页效果,非常的有创意,自己也很喜欢,于是乎就萌发了用自己的方法模仿的想法.感谢原创作者的创意,结果一样,但过程不一样哦.奉上代码,供大家参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3d-drag-page-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT

  • 利用Java读取二进制文件实例详解

    前言 本文主要给大家介绍了关于Java读取二进制文件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 读Hex写CSV data目录下有little-endian bin文件,2个字节代表一个数字. bin存储的数据格式可自己定义.相同的方法可以直接应用到Android中. `-- networkProj |-- data |-- networkProj.iml |-- out `-- src 实现方法 private static void convertFiles

  • C#读取二进制文件方法分析

    本文较为详细的分析了C#读取二进制文件方法.分享给大家供大家参考.具体分析如下: 当想到所有文件都转换为 XML时,确实是一件好事.但是,这并非事实.仍旧还有大量的文件格式不是XML,甚至也不是ASCII.二进制文件仍然在网络中传播,储存在磁盘上,在应用程序之间传递.相比之下,在处理这些问题方面,它们比文本文件显得更有效率些. 在 C 和 C++ 中,读取二进制文件还是很容易的.除了一些开始符(carriage return)和结束符(line feed)的问题,每一个读到C/C++中的文件都是

  • 使用Vue.js和Flask来构建一个单页的App的示例

    在这个教程中,我们将讲解如何将vue.js单页应用与Flask后端进行连接. 一般来说,如果你只是想通过Flask模板使用vue.js库也是没有问题的.但是,实际上是一个很明显的问题那就是,Jinja(模板引擎)也和Vue.js一样采用双大括号用于渲染,但只是一个还算过的去的解决方案. 我想要一个不同的例子.如果我需要建立一个单页应用程序(应用程序使用单页组成, vue-router 在HTML5的History-mode以及其他更多好用的功能)用vue.js,由Flask提供Web服务?简单地

  • JS实现读取xml内容并输出到div中的方法示例

    JS实现读取xml内容并输出到div中的方法示例

    本文实例讲述了JS实现读取xml内容并输出到div中的方法.分享给大家供大家参考,具体如下: note.xml文件结构: <nooo> <note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meeting!</body> </note> <n

  • 使用Python读取二进制文件的实例讲解

    目标:目标文件为一个float32型存储的二进制文件,按列优先方式存储.本文使用Python读取该二进制文件并使用matplotlib.pyplot相关工具画出图像 工具:Python3, matplotlib,os,struct,numpy 1. 读取二进制文件 首先使用open函数打开文件,打开模式选择二进制读取"rb". f = open(filename, "rb") 第二步,需要打开按照行列读取文件,由于是纯二进制文件,内部不含邮任何的数据结构信息,因此我

  • Node.js Windows Binary二进制文件安装方法

    1.下载文件 安装包的下载路径为:https://nodejs.org/en/download/ 选择你需要的版本,这里我选择了 Windows Binary 64-bit 版本. 2.配置npm安装目录 .zip包下载完成之解压缩,之后在解压之后的文件路径下创建两个文件夹:node-global(npm全局安装位置)和node-cache(npm 缓存路径) 3.修改环境变量 将node.exe所在目录和node_global加入到环境变量中. 先创建一个新的环境变量将node.exe所在的目

随机推荐