0

我正在尝试遍历此黑白图像中的像素，并且我将人们帮助我想出的代码拼凑在一起，但我似乎可以得到我想要的结果。我正在尝试遍历像素黑色背景上的白色圆圈的 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>

4

1 回答 1

2

由于图像数据排列为四组（R、G、B、A），您可以像这样简单地循环：

for (var y = 0; y < d.length; y += 4) { /// skip 4 bytes each turn
    var red = d[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];

        }
    }
}

由于图像加载是异步的，当您在设置源后立即执行 getImageData 时，您可能无法访问数据。因此，您需要等到图像加载准备好。然后执行函数。

2）可能是CORS（一种安全功能）阻止通过getImageData()or获取图像数据toDataURL()。

画布使用的图像必须具有相同的来源。如果其他域用于图像（并且该域的服务器不使用访问标头） - 或 - 从 file:// 协议加载文件，画布被定义为“脏”，这意味着您将无法获取数据作为字节数组。

您还可以检查控制台是否存在安全错误。

为了解决这个问题，有三个选项：

  1. 将图像移动到您自己的服务器，以便它从与您的页面相同的来源加载。
  2. 修改源服务器以实现 accept-* 标头以允许从其他来源加载图像（如果您自己不管理服务器，这并不容易）。
  3. 使用您自己的服务器和页面作为代理：http://myserver/getImage?http://otherserver

没有其他方法可以解决这个问题。

于 2013-07-18T18:30:15.713 回答