Bild Dunkel/Light Detection-Client-seitig Script

Question

Wer weiß, ob es ein Skript zur Verfügung Dunkelheit/Helligkeit in einem Bild (html enthielt) unter Verwendung eines Client-seitige Skript zu erkennen?

Ich möchte grundsätzlich den Bildtyp (dunkel/hell) im Hintergrund erkennen und CSS/HTML/Jquery/JS die Seite basierend auf einer Variablen anpassen, die entweder dunkel ist (true von falsch).

Ich weiß, es gibt Server seitige Skript zur Verfügung, aber kann das nicht für diese besondere Entwicklung verwenden.

Vielen Dank im Voraus.

Answer 1

Diese Funktion jede Farbe umwandeln in Graustufen und Mittelwert aller Pixel zurückzukehren, so Endwert wird

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

Usage zwischen 0 (am dunkelsten) und 255 (am hellsten) sein:

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

JSFiddle:

http://jsfiddle.net/s7Wx2/

Answer 2

Meine Antwort Zu Der Großteil des Codes in der @ lostsource-Antwort verwendet jedoch eine andere Methode, um zwischen dunklen und hellen Bildern zu unterscheiden.

Zuerst müssen wir (kurz) analysieren, was das Ergebnis der Mittelwert der Summe der RGB-Kanäle ist. Für Menschen ist es bedeutungslos. Ist Rosa heller als grün? Das heißt, warum möchten Sie (0, 255, 0) einen niedrigeren Helligkeitswert als (255, 0, 255) geben? Ist ein mittleres Grau (128, 128, 128) hell wie ein mittleres Grün (128, 255, 0)? Um dies zu berücksichtigen, gehe ich nur auf die Farbhelligkeit des Kanals ein, wie es im HSV-Farbraum geschieht. Dies ist einfach der Maximalwert eines gegebenen RGB-Tripels.

Der Rest ist Heuristiken. Lassen Sie max_rgb = max(RGB_i) für einen Punkt i. Wenn max_rgb niedriger als 128 ist (unter der Annahme eines 8bpp Bildes), dann haben wir einen neuen Punkt i gefunden, der dunkel ist, ansonsten ist es hell. Indem wir dies für jeden Punkt i tun, erhalten wir A Punkte, die hell sind, und B Punkte, die dunkel sind. Wenn (A - B)/(A + B) >= 0 dann sagen wir, das Bild ist hell. Beachten Sie, dass Sie, wenn jeder Punkt dunkel ist, einen Wert von -1 erhalten, umgekehrt, wenn jeder Punkt hell ist, erhalten Sie +1. Die vorherige Formel kann optimiert werden, so dass Sie Bilder akzeptieren können, die kaum dunkel sind. In dem Code nannte ich die Variable fuzzy, aber es entspricht nicht dem Feld fuzzy in Bildverarbeitung. Also sagen wir, das Bild ist hell, wenn (A - B)/(A + B) + fuzzy >= 0.

Der Code ist bei http://jsfiddle.net/s7Wx2/7/, ist es sehr einfach ist, lassen Sie sich nicht meine Notationen Sie erschrecken.

Answer 3

Ein Skript namens Background Check kann die Dunkelheit/Helligkeit in einem Bild erkennen. Dazu wird JavaScript verwendet. Hier

ist ein Link zu ihr:

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

Ich hoffe, das hilft alle, die einen Schieber mit dieser Art der Detektion in ihm zu machen.