Obraz Ciemny/Jasny Wykrywanie klienta jednostronny skrypt

Question

Czy ktoś wie, czy istnieje skrypt do wykrywania ciemności/jasności w obrazie (w html) przy użyciu skryptu klienckiego?

Po prostu chcę być w stanie wykryć rodzaj obrazu (ciemny/jasny) używany w tle i mieć CSS/HTML/Jquery/JS dostosować stronę na podstawie zmiennej, która jest albo ciemności światła (prawda o fałszywy).

Wiem, że dostępny jest skrypt po stronie serwera, ale nie można go użyć do tego konkretnego rozwoju.

Z góry dziękuję.

Answer 1

Ta funkcja konwersji każdego koloru do skali szarości oraz średnią wszystkich pikseli powrotu, aby końcowa wartość wynosi od 0 (najciemniejsza) do 255 (najjaśniejsza)

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); 
    } 
} 

Zastosowanie:

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

JSFiddle:

http://jsfiddle.net/s7Wx2/

Answer 2

Moja odpowiedź sposoby ponownego większość kodu w odpowiedzi @ lostsource, ale używa innej metody, aby rozróżnić ciemne i jasne obrazy.

Najpierw musimy (krótko) przeanalizować, jaki jest wynik średniej wartości sumy kanałów RGB. Dla ludzi jest bez znaczenia. Czy różowy jest jaśniejszy niż zielony? Np. Dlaczego chcesz (0, 255, 0) podać niższą wartość jasności niż (255, 0, 255)? Czy jasność mid gray (128, 128, 128) jest podobna do środkowej zieleni (128, 255, 0)? Aby wziąć to pod uwagę, zajmuję się tylko jasnością kolorów kanału, tak jak to się dzieje w przestrzeni kolorów HSV. Jest to po prostu maksymalna wartość danego tripletu RGB.

Reszta to heurystyka. Niech max_rgb = max(RGB_i) dla pewnego punktu i. Jeśli max_rgb jest mniejszy niż 128 (przy założeniu obrazu 8bpp), to znaleźliśmy nowy punkt i, który jest ciemny, w przeciwnym razie jest jasny. Robiąc to dla każdego punktu i, otrzymujemy A punktów, które są lekkie i B punktów, które są ciemne. Jeśli (A - B)/(A + B) >= 0 to mówimy, że obraz jest lekki. Zauważ, że jeśli każdy punkt jest ciemny, otrzymasz wartość -1, i odwrotnie, jeśli każdy punkt jest jasny, otrzymasz +1. Poprzednia formuła może zostać zmodyfikowana, abyś mógł akceptować obrazy ledwo ciemne. W kodzie nazwałem zmienną jako fuzzy, ale nie odpowiada ona polu fuzzy w przetwarzaniu obrazu. Tak więc, mówimy, że obraz jest jasny, jeśli (A - B)/(A + B) + fuzzy >= 0.

Kod jest pod http://jsfiddle.net/s7Wx2/7/, jest bardzo prosty, nie pozwól, aby moje notatki cię przestraszyły.

Answer 3

Skrypt o nazwie Sprawdzanie w tle wykrywa ciemność/jasność obrazu. Do tego celu wykorzystuje JavaScript.

Oto link do niego:

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

Mam nadzieję, że pomoże każdemu, kto chce zrobić suwak z tego typu wykrycia w niej.