Javascript - 找到图像的最暗区域

Question

我正在尝试使用 Javascript 查找图像中最暗的区域。到目前为止，这就是我所拥有的: https://jsfiddle.net/brampower/bv78rmz8/

function rgbToHsl(r, g, b) {
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b),
    min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;

if (max == min) {
    h = s = 0; // achromatic
} else {
    var d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
        case r:
            h = (g - b) / d + (g < b ? 6 : 0);
            break;
        case g:
            h = (b - r) / d + 2;
            break;
        case b:
            h = (r - g) / d + 4;
            break;
    }
    h /= 6;
}

return ({
    h: h,
    s: s,
    l: l,
})
}

function solve_darkest(url, callback) {
var image = new Image();
image.src = url;

image.onload = function(){
    var canvas = document.createElement('canvas');
    canvas.width  = 300;
    canvas.height = 300;

    var context = canvas.getContext("2d");
    context.drawImage(image, 0, 0);

    var imgData = context.getImageData(0, 0, 300, 300);

    var pixel = 0;
    var darkest_pixel_lightness = 100;
    var darkest_pixel_location = 0;
    for (var i = 0; i < imgData.data.length; i += 4) {
        red = imgData.data[i + 0];
        green = imgData.data[i + 1];
        blue = imgData.data[i + 2];
        alpha = imgData.data[i + 3];

        var hsl = rgbToHsl(red, green, blue);
        var lightness = hsl.l;

        if (lightness < darkest_pixel_lightness) {
            darkest_pixel_lightness = lightness;
            darkest_pixel_location = pixel;
        }

        pixel++;
    }

    var y = Math.floor(darkest_pixel_location/200);
    var x = darkest_pixel_location-(y*200);

    callback(x,y);
};
}

image_url = 'http://i.imgur.com/j6oJO8s.png'; 
solve_darkest(image_url, function(x, y) {
alert('x: '+x+' y: '+y);
});

由于 Canvas 受到污染，它在 JSFiddle 中不起作用，但希望这会给您一个想法。对于示例图像，我的 JS 当前返回以下坐标:x: 140 y: 117

这些不是正确的坐标。此图像的最暗像素应在以下坐标附近:x: 95 y: 204

我只是想不通为什么坐标如此偏离。这里有人愿意阐明我做错了什么吗？

Answer 1

好的，我刚刚测试了你的 jsfiddle。

对于受污染的 Canvas ，只需更改 crossOrigin 属性:

var image = new Image();
image.crossOrigin = "Anonymous";

对于不正确的像素，有几个问题。

1. Canvas 尺寸不正确。如果图像小于 Canvas 大小，算法会测试不在图像中但在 Canvas 中的像素。由于您没有丢弃透明像素，因此您还测试了本应为黑色的 0, 0, 0 (RGB) 像素 #000000。

2. 不正确的一维数组到二维的转换。您使用的公式不正确，因为您将宽度和高度设置为 300，但在公式中使用了 200。我建议创建一个变量并将其用作引用。

如果您怀疑该像素是否确实存在，请创建一个小图片，例如 5x5 像素大小并检查算法是否返回您预期的结果。

我更新了 jsfiddle，现在我认为这是正确的。此外，删除了 HTML 中的 img 元素，并将 Canvas 附加到正文中:https://jsfiddle.net/Draznel/597u5h0c/1/