假设我在标准JavaScript字符串中有20164个二进制数字，例如:
var data = '101010101010101010101010100110001011010101101' ...
我想做的是通过将这些数字转换为位图或HTML5 Canvas 图像来直观地看到这些数字。因此，如果我遍历所有位，并且遇到1，它将绘制一个黑色像素，而0则将绘制白色像素。
所以我想我需要一个142 x 142像素的网格，看起来像这样:
用JavaScript执行此操作的算法或方法是什么？我所要做的就是将其显示在网页上，因此创建基本的位图或 Canvas 或SVG图像可能会很好。
非常感谢
最佳答案
您对HTML5 Canvas 的想法完全正确。如果您不想执行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>
如果使用此选项，则应确保检查字符串的长度是否为您期望的长度。