Javascript 从像素值外推像素位置_Javascript_Html_Image Processing_Canvas_For Loop

Javascript 从像素值外推像素位置

javascript html image-processing canvas for-loop

Javascript 从像素值外推像素位置,javascript,html,image-processing,canvas,for-loop,Javascript,Html,Image Processing,Canvas,For Loop,我试图在黑白图像中循环像素，我拼凑了一些代码，人们帮我找到了这些代码，但我似乎可以得到我想要的结果。我试图在黑色背景上循环PNG图像的像素，白色圆圈。在代码中，循环应该只访问像素的红色值，然后在单独的数组中记录它们的位置是否有人可以尝试清理这些代码，甚至提供他们自己的方法？我想知道我做错了什么。我是一名编码初学者，在这方面真的需要一些帮助 <html> <head> </head> <body> <canvas id="ca

我试图在黑白图像中循环像素，我拼凑了一些代码，人们帮我找到了这些代码，但我似乎可以得到我想要的结果。我试图在黑色背景上循环PNG图像的像素，白色圆圈。在代码中，循环应该只访问像素的红色值，然后在单独的数组中记录它们的位置

是否有人可以尝试清理这些代码，甚至提供他们自己的方法？我想知道我做错了什么。我是一名编码初学者，在这方面真的需要一些帮助

<html>
<head>

</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        var can = document.getElementById('canvas');
        var ctx = can.getContext('2d');

        var img = new Image();
        img.onload = function(){
            can.width = img.width;
            can.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);

        var w = ctx.canvas.width, h = ctx.canvas.height;
        var id = ctx.getImageData(0,0,w,h);
        var d = id.data;
        for (var y = 0;y < h; ++y){
            for (var x = 0; x < w; ++x){

                var i=(y*w+x)*4;
                var r=d[i], g=d[i+1], b=d[i+2], a=d[i+3];

            }
        }
        }
        img.src = 'circle-image-alone-bw.png';



    </script>
</body>


var can=document.getElementById（'canvas'）；
var ctx=can.getContext（'2d'）；
var img=新图像（）；
img.onload=函数（）{
can.width=img.width；
can.height=img.height；
ctx.drawImage（img，0，0，img.width，img.height）；
var w=ctx.canvas.width，h=ctx.canvas.height；
var id=ctx.getImageData（0,0，w，h）；
var d=id数据；
对于（变量y=0；y


由于图像数据是按四倍（R、G、B、A）排列的，您可以像这样简单地循环：
for (var y = 0; y < d.length; y += 4) { /// skip 4 bytes each turn
    var red = d[y];
}

for（var y=0；y

如果您仍然获得空白数据（全部为0），则：
1） 您没有正确使用onload：
var img = new Image();
img.onload = function(){
    can.width = img.width;
    can.height = img.height;
    ctx.drawImage(img, 0, 0, img.width, img.height);

    /// HERE go to getImageData
    getData();
}
img.src = 'circle-image-alone-bw.png';

function getData() {
    var w = ctx.canvas.width, h = ctx.canvas.height;
    var id = ctx.getImageData(0,0,w,h);
    var d = id.data;
    for (var y = 0;y < h; ++y){
        for (var x = 0; x < w; ++x){

            var i=(y*w+x)*4;
            var r=d[i], g=d[i+1], b=d[i+2], a=d[i+3];

        }
    }
}

var img=newimage（）；
img.onload=函数（）{
can.width=img.width；
can.height=img.height；
ctx.drawImage（img，0，0，img.width，img.height）；
///这里转到getImageData
getData（）；
}
img.src='circle image only bw.png'；
函数getData（）{
var w=ctx.canvas.width，h=ctx.canvas.height；
var id=ctx.getImageData（0,0，w，h）；
var d=id数据；
对于（变量y=0；y

由于图像加载是异步的，因此在设置源之后立即执行getImageData时，您可能无法访问数据。因此，您需要等待图像加载就绪，然后执行该函数
2） 通过getImageData（）
或toDataURL（）
可能会阻止获取图像数据
画布使用的图像必须具有相同的来源。如果其他域用于图像（并且该域的服务器不使用访问标头）-或者-文件是从file://protocol加载的，则画布定义为“dirty”，这意味着您将无法以字节数组的形式获取数据
您还可以检查控制台是否存在安全错误
要解决此问题，有三种选择：
将图像移动到您自己的服务器，使其从与页面相同的来源加载
修改源服务器以实现一个accept-*头，以允许从其他来源加载映像（如果您不自己管理服务器，这就不那么容易）
使用您自己的服务器和页面作为代理：http://myserver/getImage?http://otherserver
没有其他方法可以解决此问题。
图像将以异步方式加载并在画布中绘制。这意味着，在读取所有像素后，可以调用onload函数。是的，我编辑了该函数，但我不能做的是让循环实际通过图像中的像素。我查看了d[I]的内容它是45000个零，所以全是黑色的，没有白色的值。只是为了补充答案。使用他的解决方案，你可以使用除法和mod.Ex.：pos=y/4；real_y=Math.floor（pos/width）；real_x=pos%width；@user2517142我能说什么，这就是您循环的方式。如果您的图像是从其他域加载的（或使用文件：/），您是否可以共享您尝试使用的图像，因为如果不访问它，很难进行测试这可以解释由于CORS导致的空白图像。@user2517142正如我在代码注释中提到的，您在加载图像之前正在循环。我没有足够的声誉来发布图像。这是指向图像的链接