Question

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

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

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

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

Answer 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个字节，当然，因为每个像素为它的红色值需要一个字节，一个字节为 Geen value，另一个字节为 Blue 值，一个字节为 Alpha 值。导致每像素4个字节。

当您读取二进制文件时，JavaScript会将其转换为字符串，但由于RGBA值是整数（从0到255）而不是字符，我们需要检索转换为字符的字节的数值。要做到这一点，我们只需要获取角色的charCode，这样我们就可以获得原始整数。

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

处理BinaryString的Javascript

1 个答案: