首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >查看内存中的画布数据?

查看内存中的画布数据?
EN

Stack Overflow用户
提问于 2015-02-11 11:04:49
回答 1查看 267关注 0票数 0

我有一个用图像数据动态填充的canvas标记数组,我需要分析canvas的图像数据以进行调试。如何在内存中查看这些内容?

我显然可以将它们绘制到屏幕画布上,但这将非常耗时,我正在寻找一种类似于在Chrome的监视列表中查看变量的解决方案。

编辑:我需要可视化地查看画布数据,而不是文本。我正在寻求一种方法,无需手动将内存中画布的数据绘制到屏幕画布上,即可节省时间。例如,在Firefox的开发人员中,如果您将鼠标悬停在图像源或图像URL的CSS上,就会显示一个带有图像的小工具提示

我想在内存中的画布上使用类似的东西。

EN

回答 1

Stack Overflow用户

发布于 2015-02-11 12:13:25

创建一个大的屏幕画布,并使用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,...以及更多的数千元素。

如果这是你需要的,下面是如何获得它的方法:

代码语言:javascript
代码运行次数:0
运行
复制
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);
}

如果这不是你想要的,也许你可以修改你的问题,更好地解释你的需求?

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28445885

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档