4

假设我在标准 JavaScript 字符串中有 20,164 个二进制数字，例如：

var data = '101010101010101010101010100110001011010101101' ...

我想要做的是通过将其转换为位图或 HTML5 画布图像来查看这些数字的可视化表示。因此，如果我遍历所有位并且遇到 1 它将绘制一个黑色像素，而 0 像素将是白色。

所以我猜我需要一个 142 x 142 像素的网格，看起来像这样：

二进制数据位图

在 JavaScript 中执行此操作的算法或方法是什么？我需要做的就是将它显示在网页上，所以也许创建一个基本的位图或画布或 SVG 图像就可以了。

非常感谢

4

3 回答 3

8

您对 HTML5 画布的想法完全正确。如果您不想做 base64 数据，您可以尝试以下方法。

Javascript（没有错误检查）：

var string = "1010101...";
var ctx = document.getElementById("canvas").getContext('2d');
ctx.fillStyle = "#FFF";  // Fill with white first
ctx.fillRect(0, 0, 142, 142);
ctx.fillStyle = "#000";
for (var i = 0; i < 142; i++) {  // Loop through each character
    for (var j = 0; j < 142; j++) {
        if (string[i*142+j] == '1')     // If the character is one,
            ctx.fillRect(i, j, 1, 1 );  // fill the pixel with black
    }
}

HTML：

<body>
    <canvas width=142 height=142 id="canvas"></canvas>
</body>

如果你使用它，你应该确保检查字符串的长度是你期望的长度。

于 2013-07-10T22:07:23.607 回答
5

你可以做类似的事情

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

var image = new Image();
image.src ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC";
image.onload = function() {
    ctx.drawImage(image, 0, 0);
};
于 2013-07-10T22:03:37.213 回答
2

您也可以不使用 JS 直接将图像包含在 HTML 中：

例子：

<img alt='' src='data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7'/>

但图像必须采用正确的格式：jpg、tiff、png 等，而不仅仅是位图。您可以轻松地将位图转换为 BMP 等格式。

于 2013-07-10T22:13:24.333 回答