从二进制1和0创建位图/画布图像以在JavaScript中直观地查看数据的算法？
use*_*552 3 javascript jquery svg canvas bitmap
假设我在标准JavaScript字符串中有20,164个二进制数字,例如:
var data = '101010101010101010101010100110001011010101101' ...
我想要做的是通过将这些数字转换为位图或HTML5画布图像来查看这些数字的可视化表示.因此,如果我遍历所有位并且它遇到1则会绘制一个黑色像素,而0则该像素将为白色.
所以我猜我需要一个142 x 142像素的网格,看起来像这样:
在JavaScript中执行此操作的算法或方法是什么？我需要做的就是在网页上显示它,所以可能创建一个基本的位图或画布或SVG图像就可以了.
非常感谢
你对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>
如果你使用它,你应该确保检查字符串的长度是你期望的长度.
- 用白色填充所有内容然后仅绘制黑色像素怎么样？ (4认同)
你可以做点什么
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);
};
| 归档时间： |
|
| 查看次数： |
1807 次 |
| 最近记录： |