查看内存中的画布数据？

Question

我有一个画布标签数组被动态填充图像数据，我需要分析画布的图像数据进行调试。我如何在内存中查看这些内容？

我明显可以将它们绘制到屏幕上的画布上，但这会非常耗时，而且我正在寻找类似于Chrome观察列表中查看变量的解决方案。

编辑：我需要视觉，而不是文本查看画布数据。我想要一种方法来做到这一点，而无需手动将内存画布的数据绘制到屏幕画布上以节省时间。例如，在Firefox的开发者toold，如果你悬停的图像或图像的URL的CSS的来源，它显示了一个小的提示与图像

我想为在内存中的画布类似的东西

Answer 1

创建一个大屏幕画布并使用缩放版本context.drawImage在屏幕画布上绘制多个缩小内存画布。您可以在大画布上一次查看4,6,8个较小的画布。有点像四屏安全摄像头显示。

[加法基于评论（和澄清要求）

我不知道怎样做你的要求。

画布不是一个变量。它基本上是一个位图。

如果你想查看像素数据，你可以使用context.getImageData。你会看到成千上万的数组元素都在0-255之间。

下面是一个图像的像素数据的一个例子：

3,45,117,255,2,46,119,255,4,48,123,255,2,49,127,255,3,51,133,255,2,52,137,255,2,54,140,​​255,1,55,143,255 ，7,74,152,255,8,71,148,255,7,69,146,255,5,69,141,255,5,74,143,255,2,82,145,255,1,92,149,255,0,97,152,255,31,92,175,255,15,86,174,255,0,79,99,255,0,48,121,255 ，10,30,177,255,21,35,144,255,1,33,134,255,0,46,155,255,0,44,174,255,0,57,120,255,0,51,121,255,0,37,167,255,9,50,156,255,2,52,125,255,15,67,168,255,0,53,162,255,15 ，71,168,255,4,63,153,255,1,62,145,255,14,69,152,255,9,64,155,255,9,83,182,255,14,121,225,255,0,124,232,255,11,120,223,255,11,124,228,255,7,124,229,255,2,123,228,255,8,131,235,255,16,138,239,255,10,130,227,255,0,115,209,255,2,123,238,255,0,123,233,255 ...成千上万的ele on nts更多。

如果这是你所需要的，这里是如何得到它：

var img=new Image(); 
img.onload=start; 
img.src="yourImageSource"; 
function start(){ 

    canvas.width=img.width; 
    canvas.height=img.height; 
    ctx.drawImage(img,0,0); 

    var a=ctx.getImageData(0,0,cw,ch).data; 

    var t=""; 
    var comma=""; 
    for(var i=0;i<a.length;i++){ 
     t+=comma+a[i]; 
     comma=","; 
    } 
    console.log(t); 
} 

如果这不是你想要的，也许你可以编辑你的问题，更好地解释你需要什么？