Image Scénario de détection de lumière obscurité / lumière

Cette fonction convertira chaque couleur en échelle de gris et la moyenne de retour de tous les pixels, donc la valeur finale sera entre 0 (plus sombre) et 255 (plus lumineux)

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:

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

JSFiddle:

http://jsfiddle.net/s7Wx2/

Ma réponse réutilise la plupart du code dans la réponse de @cstsource, mais elle utilise une méthode différente pour tenter de distinguer les images sombres et claires.

Tout d'abord, nous devons (brièvement) analyser ce qui est le résultat de la valeur moyenne de la somme des canaux RVB. Pour les humains, c'est sans signification. Le rose est-il plus lumineux que le vert? C'est-à-dire, pourquoi voudriez-vous (0, 255, 0) donner une valeur de luminosité inférieure à (255, 0, 255)? En outre, est un gris moyen (128, 128, 128) brillant comme un milieu vert (128, 255, 0)? Pour prendre ceci en considération, je ne traite que de la luminosité des couleurs de la chaîne comme cela se fait dans l'espace de couleur HSV. Il s'agit simplement de la valeur maximale d'un triplet RV donné.

Le reste est une heuristique. Laissez max_rgb = max(RGB_i) pour un certain point i . Si max_rgb est inférieur à 128 (en supposant une image 8bpp), nous avons trouvé un nouveau point i qui est sombre, sinon il est léger. Si vous faites cela pour chaque point i , nous obtenons des points A et B points B qui sont sombres. Si (A - B)/(A + B) >= 0 nous disons que l'image est légère. Notez que si chaque point est sombre, alors vous obtenez une valeur de -1, inversement, si chaque point est léger, vous obtenez +1. La formule précédente peut être modifiée afin que vous puissiez accepter des images à peine sombres. Dans le code, j'ai nommé la variable comme fuzzy , mais elle ne rend pas justice au champ fuzzy dans le traitement d'image. Donc, nous disons que l'image est légère si (A - B)/(A + B) + fuzzy >= 0 .

Le code est à http://jsfiddle.net/s7Wx2/7/ , c'est très simple, ne laissez pas mes notations vous effrayer.

Un script appelé Vérification d'arrière-plan peut détecter l'obscurité / légèreté dans une image. Il utilise JavaScript pour le faire.

Voici un lien pour cela:

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

J'espère que cela aide quiconque veut faire un curseur avec ce type de détection en son sein.