javascript getImageData 未从 png 图像返回正确的像素颜色

Question

我正在尝试使用 getImageData 从 png 图像的左边缘返回第一个非白色像素的 x 位置，如下所示；

    function getLeftEdge(myImage) {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        var img = document.getElementById(myImage);
        context.drawImage(img, 0, 0);
        var pixelData;

        for (x = 1; x <= img.width; x++) {
            for (y = 1; y <= img.height; y++) {
                pixelData = context.getImageData(x, y, 1, 1);
                if (pixelData.data[0] != 255) {
                    alert("return x,y " + x + "," + y);
                    return x;
                }
            }
        }
    }

我知道我正在使用的图像中的第一个非白色像素位于 222,254，但我创建的函数却报告 1,150。我试图制作一个 jsfiddle ，它不起作用，但您可以看到我正在使用的图像。

Answer 1

问题是你没有设置 Canvas 的大小。因此它默认为 150x300 像素。您还可以从 1,1 处开始迭代，并在 width,height 处停止，但左上角像素实际上是 0,0，右下角像素是 width-1,height-1。当循环达到 1,150 时，该位置没有像素，因为 y 坐标的最大值为 149。这就是 getImageData 报告像素为黑色的原因。

function getLeftEdge(myImage) {
    var img = document.getElementById(myImage);
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    var context = canvas.getContext('2d');
    context.drawImage(img, 0, 0);
    var pixelData;

    for (var x = 0; x < img.width; x++) {
        for (var y = 0; y < img.height; y++) {
            pixelData = context.getImageData(x, y, 1, 1);
            if (pixelData.data[0] != 255) {
                alert("return x,y " + x + "," + y);
                return x;
            }
        }
    }
}

然而，这并不能解决问题，因为虽然背景看起来好像是全白的，但仍有一些像素，例如#fefefe。您应该考虑使用更高的阈值。