Question

我试图遍历这张黑白图像中的像素，我拼凑了人们帮我提出的代码，但我似乎可以得到我想要的结果。我正在尝试循环通过黑色背景上的白色圆圈的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>

Answer 1

由于图像数据排列为四倍（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 (a security feature)开始阻止getImageData()或toDataURL()获取图像数据。

canvas使用的图像必须是相同的原点。如果其他域用于图像（并且该域中的服务器不使用访问头） - 或 - 文件从file：// protocol加载，则canvas被定义为“脏”，这意味着您将无法获得数据为字节数组。

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

要解决此问题，有三种选择：

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

除此之外别无他法。

外推像素位置形成像素值

1 个答案: