图像暗/光检测客户端双面脚本

Question

有没有人知道是否有可用于使用客户端脚本检测图像(包含html)中的暗度/亮度的脚本？

我基本上希望能够检测背景中使用的图像类型(黑暗/光线),并让CSS/HTML/Jquery/JS根据光暗的变量(true为false)调整页面.

我知道有可用的服务器端脚本但不能用于此特定开发.

提前致谢.

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/

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/,非常简单,不要让我的记谱吓到你.

Answer 3

名为Background Check的脚本可以检测图像中的暗度/亮度.它使用JavaScript来实现.

这是一个链接:

http://www.kennethcachia.com/background-check/

我希望这有助于任何人想要在其中制作这种类型的检测滑块.