subir - ¿Cómo se convierte una imagen en color a blanco/negro usando Javascript?

manipular imagenes con javascript

Question

¿Cómo se convierte una imagen en color a negro / blanco usando solo Javascript?

Y, también lo hacen compatible en la mayoría de los navegadores porque escuché que Internet Explorer tiene un mecanismo de "filtro" pero ningún otro navegador lo admite.

Answer 1

Algunos filtros de imagen están disponibles en CSS y son compatibles con todos los principales navegadores, pero puede tener muchas más opciones utilizando HTML5 Canvas y Javascript.

Sin embargo, al usar el filtrado de imágenes basado en Canvas, no necesita implementar el algoritmo de filtros usted mismo. Solo use una biblioteca de procesamiento de imágenes o manipulación de Lienzos.

Ejemplos:

• fabric.js
• processing.js
• MarvinJ

En los ejemplos a continuación, utilicé MarvinJ.

Cargando imagen:

image = new MarvinImage();
image.load("https://i.imgur.com/B33rKWi.png", imageLoaded);

Escala de grises

Marvin.grayScale(image.clone(), image);

En blanco y negro:

Marvin.blackAndWhite(image.clone(), image, 5);

Blanco y negro 2:

Marvin.blackAndWhite(image.clone(), image, 40);

Semitono:

Marvin.halftoneErrorDiffusion(image.clone(), image);

Ejecutable Ejemplo:

var canvas = document.getElementById("canvas");
image = new MarvinImage();
image.load("https://i.imgur.com/B33rKWi.png", imageLoaded);

function imageLoaded(){
 // GrayScale
 //Marvin.grayScale(image.clone(), image);
 //image.draw(canvas);
 
 // Black and White
 Marvin.blackAndWhite(image.clone(), image, 5);
 image.draw(canvas);
 
 // Black and White 2
 //Marvin.blackAndWhite(image.clone(), image, 40);
 //image.draw(canvas);
 
 // Error Diffusion
 //Marvin.halftoneErrorDiffusion(image.clone(), image);
 //image.draw(canvas);
}

<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>

Answer 2

A pesar de mi escepticismo inicial, parece que esa magia es posible, utilizando la nueva funcionalidad de Canvas en algunos navegadores.

Esta página muestra cómo hacerlo usando navegadores compatibles con Canvas:

http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html

Para IE necesita usar filtros, hay un ejemplo de hacer escala de grises aquí:

http://www.javascriptkit.com/filters/basicimage.shtml

Answer 3

La forma en que lo haría es configurar el src del img para que apunte a un script PHP del lado del servidor

p.ej.,

<img src="http://mysite/grayscale.php?url=''...''

Ese script recupera la imagen, ejecuta un código GD y devuelve un JPG. Algo como esto

Answer 4

Canvas es sin duda la mejor solución para este problema, y ​​solo quería señalar que, para IE, puedes usar el proyecto exCanvas de google, que traduce los comandos canvas en el lenguaje de vector basado en Microsoft XML, VML.

http://excanvas.sourceforge.net/

Answer 5

He encontrado que esta ( http://spyrestudios.com/html5-canvas-image-effects-black-white/ ) solución funciona bastante bien fuera de IE, que, como han señalado otros, necesitarás usar filtros para.

Answer 6

Este plugin de jquery parece funcionar a través del navegador. Aunque no lo he probado a fondo.

https://github.com/GianlucaGuarini/jQuery.BlackAndWhite

Answer 7

Los navegadores modernos ahora pueden hacer esto en CSS: en cualquier elemento HTML, no solo en imágenes. Combinado con el antiguo filter CSS de IE, puede obtener una compatibilidad bastante buena:

image.grayscale {
  /* IE */
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

  /* Chrome, Safari */
  -webkit-filter: grayscale(1);

  /* Firefox */
  filter: grayscale(1);
}

OP especifica "solo JavaScript", pero también menciona que el filter de IE sería aceptable si fuera más ampliamente compatible, lo que es ahora (efectivamente), así que creo que esta es la mejor solución en 2015. Si realmente debe tener JavaScript:

element.style.filter = ''grayscale(1)'';

Fuentes:

• Soporte del navegador
• Especulación
• Tutorial

Answer 8

Uso de HTML5 Canvas y JavaScript

 ctx.drawImage(img, 0, 0, w, h);

    var imgPixels = ctx.getImageData(0, 0, w, h);
    for(var y = 0; y < imgPixels.height; y++){
     for(var x = 0; x < imgPixels.width; x++){
          var i = (y * 4) * imgPixels.width + x * 4;
          var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
          imgPixels.data[i] = avg;
          imgPixels.data[i + 1] = avg;
          imgPixels.data[i + 2] = avg;
     }
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);