從二進制1和0創建位圖/畫布圖像以在JavaScript中直觀地查看數據的算法？

Question

假設我在標准JavaScript字符串中有20,164個二進制數字，例如：

var data = '101010101010101010101010100110001011010101101' ...

我想要做的是通過將這些數字轉換為位圖或HTML5畫布圖像來查看這些數字的可視化表示。 因此，如果我遍歷所有位並且它遇到1則會繪制一個黑色像素，而0則該像素將為白色。

所以我猜我需要一個142 x 142像素的網格，看起來像這樣：

二進制數據位圖

在JavaScript中執行此操作的算法或方法是什么？ 我需要做的就是在網頁上顯示它，所以可能創建一個基本的位圖或畫布或SVG圖像就可以了。

非常感謝

Answer 1

你對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>

如果你使用它，你應該確保檢查字符串的長度是你期望的長度。

Answer 2

你可以做點什么

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);
};

Answer 3

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

例：

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

但圖像必須采用正確的格式：jpg，tiff，png等，而不僅僅是位圖。 您可以輕松地將位圖轉換為BMP等格式。

從二進制1和0創建位圖/畫布圖像以在JavaScript中直觀地查看數據的算法？

問題描述

3 個解決方案

解決方案1
7 已采納 2013-07-10 22:07:23

解決方案2
5 2013-07-10 22:03:37

解決方案3
2 2013-07-10 22:13:24

從二進制1和0創建位圖/畫布圖像以在JavaScript中直觀地查看數據的算法？

問題描述

3 個解決方案

解決方案1 7 已采納 2013-07-10 22:07:23

解決方案2 5 2013-07-10 22:03:37

解決方案3 2 2013-07-10 22:13:24

解決方案1
7 已采納 2013-07-10 22:07:23

解決方案2
5 2013-07-10 22:03:37

解決方案3
2 2013-07-10 22:13:24