客户端脚本中的图像亮度检测

Question

有谁知道是否有脚本可用于使用客户端脚本检测图像（包括 HTML）中的暗度/亮度？

我基本上希望能够检测背景中使用的图像（暗/亮）的亮度，并让 CSS/HTML/jQuery/JS 根据暗或亮（true 或 false）变量调整页面。

我知道有可用的服务器端脚本，但不能将其用于这个特定的开发项目。

原文由 Redox 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

此函数会将每种颜色转换为灰度并返回所有像素的平均值，因此最终值将介于 0（最暗）和 255（最亮）之间

function getImageLightness(imageSrc,callback) {
    var img = document.createElement("img");
    img.src = imageSrc;
    img.style.display = "none";
    document.body.appendChild(img);

    var colorSum = 0;

    img.onload = function() {
        // create canvas
        var canvas = document.createElement("canvas");
        canvas.width = this.width;
        canvas.height = this.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(this,0,0);

        var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
        var data = imageData.data;
        var r,g,b,avg;

        for(var x = 0, len = data.length; x < len; x+=4) {
            r = data[x];
            g = data[x+1];
            b = data[x+2];

            avg = Math.floor((r+g+b)/3);
            colorSum += avg;
        }

        var brightness = Math.floor(colorSum / (this.width*this.height));
        callback(brightness);
    }
}

用法：

 getImageLightness("image.jpg",function(brightness){
    console.log(brightness);
});

JSFiddle：

http://jsfiddle.net/s7Wx2/

原文由 lostsource 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我的答案重用了@lostsource 答案中的大部分代码，但它使用不同的方法来尝试区分暗图像和亮图像。

首先我们需要（简单）分析一下RGB通道求和的平均值结果是什么。对于人类来说，这是毫无意义的。粉色比绿色亮吗？即，为什么您希望 (0, 255, 0) 给出比 (255, 0, 255) 更低的亮度值？另外，中灰色 (128, 128, 128) 是否像中绿色 (128, 255, 0) 一样亮？考虑到这一点，我只处理通道的颜色亮度，就像在 HSV 颜色空间中所做的那样。这只是给定 RGB 三元组的最大值。

剩下的就是启发式的。让 max_rgb = max(RGB_i) 对于某些点 i 。如果 max_rgb 低于128（假设是8bpp图像），那么我们找到了一个新点 i 是暗的，否则就是亮的。对每个点 i 执行此操作，我们得到 A 亮点和 B 暗点。如果 (A - B)/(A + B) >= 0 那么我们说图像很亮。请注意，如果每个点都是暗的，那么您将获得 -1 的值，相反，如果每个点都是亮的，您将获得 +1。可以调整之前的公式，以便您可以接受几乎不暗的图像。在代码中，我将变量命名为 fuzzy ，但它对图像处理中的 fuzzy 字段不公平。所以，如果 (A - B)/(A + B) + fuzzy >= 0 我们说图像是亮的。

代码在 http://jsfiddle.net/s7Wx2/328/ ，非常简单，不要让我的符号吓到你。

原文由 mmgp 发布，翻译遵循 CC BY-SA 3.0 许可协议