Кто-нибудь знает, есть ли script для обнаружения темноты/легкости изображения (html включен) с использованием стороннего клиента script?
В основном я хочу, чтобы можно было определить тип изображения (темное/светлое), используемое в фоновом режиме, и CSS/HTML/Jquery/JS адаптировать страницу на основе переменной, которая либо темна света (true для false).
Я знаю, что есть серверный script, но не может использовать его для этой конкретной разработки.
Спасибо заранее.
Эта функция преобразует каждый цвет в шкалу серого и возвращает среднее значение для всех пикселей, поэтому конечное значение будет находиться между 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:
Мой ответ повторяет большую часть кода в ответе @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/, это очень просто, не позволяйте моим нотам пугать вас.
A script, называемый фоновой проверкой, может обнаруживать темноту/яркость изображения. Для этого используется JavaScript.
Вот ссылка на него:
http://www.kennethcachia.com/background-check/
Я надеюсь, что это поможет любому, кто хочет сделать слайдер с этим типом обнаружения внутри него.