处理 BinaryString 的 Javascript答案

【问题标题】：Javascript dealing with BinaryString处理 BinaryString 的 Javascript
【发布时间】：2011-06-24 19:38:02
【问题描述】：

我目前正在使用 HTML5 File Api 来读取一些文件。

var reader = new FileReader();
reader.onload = function(event){
 var result =  event.target.result;
}
reader.readAsBinaryString(...)

现在...结果是一个大（50k+字节）文件。我想用它做一些计算。例如检查它的前几个字节，将最后 20k 字节绘制为画布上的像素等......

解析这个字符串最有效的方法是什么...

【问题讨论】：

标签： javascript string api file binary

【解决方案1】：

好的，让我带您了解在画布中将最后 20K 字节绘制为像素的部分。（虽然我不确定浏览器是否可以在不减慢或破坏脚本执行的情况下处理这个问题）

首先，要获取最近 20K 字节的起始位置，请执行以下操作：

var pixelsOffset = result.length - 20480

由于您的二进制数据是字符串格式，每个 ASCII 字符只占用 1 个字节，因此字符串的长度与字节数相同，20KBytes 等于 20,480 个字节。

既然您知道像素信息从哪里开始，您需要遍历字节直到到达字符串的末尾，同时将像素绘制到画布上。

var x = 0;
var y = 0;
var width = 300;

for(var I = pixelsOffset; I < result.length; I += 4)
{
    var R = result.charCodeAt(I);
    var G = result.charCodeAt(I + 1);
    var B = result.charCodeAt(I + 2);
    var A = result.charCodeAt(I + 3);

    var colorString = "rgba(" + R + ", " + G + ", " + B + ", " + A + ")";

    canvasContext.fillStyle = colorString;

    canvasContext.fillRect(x, y, 1, 1);

    x++;

    if(x == width)
    {
        x = 0;
        y++;
    }
}

我在这里所做的首先是创建变量，我可以在其中存储当前像素的位置 (x,y) 和图像的宽度。

然后是一个 FOR 循环，我每次跳转 4 个字节，当然，因为每个像素占用一个字节作为它的 Red 值，一个字节作为它的 Geen 值，另一个字节代表它的 Blue 值，一个字节代表它的 Alpha 值。导致每像素 4 个字节。

当您读取二进制文件时，JavaScript 会将其转换为字符串，但由于 RGBA 值是整数（从 0 到 255）而不是字符，因此我们需要取回转换为 char 的字节的数值.为此，我们只需要获取字符的 charCode，这样我们就有了原始整数。

在获得 RGBA 值后，我们需要将其放入画布接受的格式的字符串中，将其设置为当前的 fillStyle，然后绘制一个 1x1 矩形。一旦我们到达该行的最后一个像素，我们递增y 以到达下一行并将x 设置为零，因此我们从行的开头开始。

【讨论】：