Изображение Темное/обнаружение света Клиент-клиент Script

Ответ 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/

Ответ 2

Мой ответ повторяет большую часть кода в ответе @lostsource, но он использует другой метод, чтобы попытаться отличить темные и светлые изображения.

Сначала нам нужно (кратко) проанализировать, что является результатом среднего значения суммы каналов RGB. Для людей это бессмысленно. Розовый ярче зеленого? I.e., почему вы хотите (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 в Image Processing. Итак, мы говорим, что изображение светлое, если (A - B)/(A + B) + fuzzy >= 0.

Код находится в http://jsfiddle.net/s7Wx2/7/, это очень просто, не позволяйте моим нотам пугать вас.

Ответ 3

A script, называемый фоновой проверкой, может обнаруживать темноту/яркость изображения. Для этого используется JavaScript.

Вот ссылка на него:

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

Я надеюсь, что это поможет любому, кто хочет сделать слайдер с этим типом обнаружения внутри него.