subir - javascript mostrar imagen

Detección del lado oscuro/claro de la imagen Script Script

Question

¿Alguien sabe si hay un script disponible para detectar la oscuridad / luminosidad en una imagen (html incluido) usando un script del lado del cliente?

Básicamente, quiero poder detectar el tipo de imagen (oscura / clara) utilizada en el fondo y hacer que CSS / HTML / Jquery / JS adapte la página en función de una variable que sea oscura (claro o falso).

Sé que hay un script del lado del servidor disponible pero no puedo usarlo para este desarrollo en particular.

Gracias por adelantado.

Answer 1

Esta función convertirá cada color a escala de grises y devolverá el promedio de todos los píxeles, por lo que el valor final estará entre 0 (el más oscuro) y 255 (el más brillante)

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

Uso:

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

JSFiddle:

http://jsfiddle.net/s7Wx2/

Answer 2

Mi respuesta reutiliza la mayor parte del código en la respuesta de @ lostsource, pero utiliza un método diferente para intentar distinguir entre imágenes oscuras y claras.

Primero debemos analizar brevemente cuál es el resultado del valor promedio de la suma de los canales RGB. Para los humanos, no tiene sentido. ¿Es el rosa más brillante que el verde? Es decir, ¿por qué querría (0, 255, 0) dar un valor de brillo más bajo que (255, 0, 255)? Además, ¿es un gris medio (128, 128, 128) brillante como un verde medio (128, 255, 0)? Para tener esto en cuenta, solo me ocupo del brillo del color del canal tal como se hace en el espacio de color HSV. Este es simplemente el valor máximo de un triplete RGB dado.

El resto es heurística. Sea max_rgb = max(RGB_i) para algún punto i . Si max_rgb es inferior a 128 (suponiendo una imagen de 8bpp), encontramos un nuevo punto i que está oscuro, de lo contrario es claro. Haciendo esto para cada punto i , obtenemos los puntos A que son claros y B puntos B que son oscuros. Si (A - B)/(A + B) >= 0 entonces decimos que la imagen es clara. Tenga en cuenta que si cada punto es oscuro, entonces obtiene un valor de -1, a la inversa, si cada punto es claro, obtiene +1. La fórmula anterior se puede modificar para que pueda aceptar imágenes apenas oscuras. En el código nombré la variable como fuzzy , pero no hace justicia al campo fuzzy en el procesamiento de imágenes. Entonces, decimos que la imagen es clara si (A - B)/(A + B) + fuzzy >= 0 .

El código está en http://jsfiddle.net/s7Wx2/328/ , es muy sencillo, no dejes que mis anotaciones te asusten.

Answer 3

Una secuencia de comandos llamada Verificación de fondo puede detectar la oscuridad / claridad en una imagen. Utiliza JavaScript para hacerlo.

Aquí hay un enlace para eso:

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

Espero que ayude a cualquiera que quiera hacer un control deslizante con este tipo de detección dentro de él.

Answer 4

MarvinJ proporciona el método averageColor (imagen) para obtener el color promedio de una imagen dada. Teniendo el color promedio, puede crear reglas para definir el color de la etiqueta sobre la imagen.

Cargando una imagen:

var image = new MarvinImage();
image.load("https://i.imgur.com/oOZmCas.jpg", imageLoaded);

Consiguiendo el color medio:

var averageColor = Marvin.averageColor(image2); // [R,G,B]

La salida del fragmento de este post:

var canvas = document.getElementById("canvas");
var image1 = new MarvinImage();
image1.load("https://i.imgur.com/oOZmCas.jpg", imageLoaded);
var image2 = new MarvinImage();
image2.load("https://i.imgur.com/1bZlwv9.jpg", imageLoaded);
var loaded=0;

function imageLoaded(){
  if(++loaded == 2){
    var averageColor;
    averageColor = Marvin.averageColor(image1);
    setText("LION", averageColor, "text1");
    averageColor = Marvin.averageColor(image2);
    setText("LION", averageColor, "text2");
  }
}

function setText(text, averageColor, id){
  if(averageColor[0] <= 80 && averageColor[1] <= 80 && averageColor[2] <= 80){
     document.getElementById(id).innerHTML = "<font color=''#ffffff''>"+text+"</font>";
  }
  else if(averageColor[0] >= 150 && averageColor[1] >= 150 && averageColor[2] >= 150){
     document.getElementById(id).innerHTML = "<font color=''#000000''>"+text+"</font>";
  }
  
}

.divImage{
  width:400px; 
  height:268px;
  display:grid;
}

.divText{
  font-family:Verdana;
  font-size:56px;
  font-weight:bold;
  margin:auto;
  display:table-cell;
}

<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<div id="result"></div>
<div style="background-image:url(https://i.imgur.com/oOZmCas.jpg);" class="divImage">
   <div id="text1", class="divText"></div>
</div>
<div style="background-image:url(https://i.imgur.com/1bZlwv9.jpg);" class="divImage">
   <div id="text2", class="divText"></div>
</div>