从二进制1和0创建位图/画布图像以在JavaScript中直观地查看数据的算法？
[英]Algorithm to create a bitmap/canvas image from binary 1's and 0's to visually see the data in JavaScript?
问题描述
Let's say I have 20,164 binary digits in a standard JavaScript string, for example: 
假设我在标准JavaScript字符串中有20,164个二进制数字，例如：
var data = '101010101010101010101010100110001011010101101' ...
What I want to do is see a visual representation of these digits by converting it to a bitmap or perhaps HTML5 canvas image. 我想要做的是通过将这些数字转换为位图或HTML5画布图像来查看这些数字的可视化表示。 So if I loop through all the bits and it comes across a 1 it will draw a black pixel, and a 0 the pixel will be white. 因此，如果我遍历所有位并且它遇到1则会绘制一个黑色像素，而0则该像素将为白色。
So I'm guessing I'll need a 142 x 142 pixel grid something which looks like this: 所以我猜我需要一个142 x 142像素的网格，看起来像这样：
What's an algorithm or way to do this in JavaScript? 在JavaScript中执行此操作的算法或方法是什么？ All I need to do is display it on the web page so maybe creating a basic bitmap or canvas or SVG image will be fine. 我需要做的就是在网页上显示它，所以可能创建一个基本的位图或画布或SVG图像就可以了。
Many thanks 非常感谢
3 个解决方案
解决方案1
7 已采纳 2013-07-10 22:07:23
You're exactly correct with the HTML5 canvas idea. 你对HTML5画布的想法完全正确。 You could try something like the following if you don't want to do base64 data. 如果您不想执行base64数据，可以尝试以下类似的操作。
Javascript (with no error checking): 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: HTML：
<body>
<canvas width=142 height=142 id="canvas"></canvas>
</body>
If you use this, you should make sure to check that the length of the string is the length you are expecting. 如果你使用它，你应该确保检查字符串的长度是你期望的长度。
解决方案2
5 2013-07-10 22:03:37
you can do something like 你可以做点什么
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);
};
解决方案3
2 2013-07-10 22:13:24
You may also include the image directly in the HTML without using JS: 您也可以直接在HTML中包含图像而不使用JS：
Example: 例：
<img alt='' src='data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7'/>
But the image must be in a correct format: jpg, tiff, png, etc. not just as a bitmap. 但图像必须采用正确的格式：jpg，tiff，png等，而不仅仅是位图。 You may easily convert a bitmap to formats like BMP. 您可以轻松地将位图转换为BMP等格式。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.