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

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/