Cómo añadir filtros para fotos (efectos de imágenes) en el explorador con JavaScript usando Lena.js

Cómo añadir filtros para fotos (efectos de imágenes) en el explorador con JavaScript usando Lena.js

Los filtros de imágenes te permiten aplicar diversos efectos a las fotos. Aunque JavaScript no es adecuado para la manipulación de imágenes al menos en imágenes a gran escala, puede utilizarse con imágenes no tan pesadas en el navegador y en pequeños proyectos.

En este artículo te mostraremos como añadir algunos filtros para fotos en el explorador usando la librería Lena.js.

1. Descarga Lena.js

Lena.js es una pequeña librería para manipular imágenes. Te permite aplicar algunos filtros básicos a fotos en una imágen en el documento. Puedes incluir una copia local de Lena.js en tu proyecto o usar el CDN de una copia local: 

<!-- Usando un CDN -->
<script src="https://cdn.rawgit.com/davidsonfellipe/lena.js/master/dist/lena.js"></script>

<!-- O de una copia local -->
<script src="lena.js"></script>

Puedes descargar una copia de la librería en el repositorio aquí o usando un manager de paquetes como bower:

bower install lena.js

Para más información acerca de esta librería, por favor visita el repositorio oficial en Github aquí.

2. Usando Lena.js

LenaJS es realmente fácil de usar, puedes usar 2 métodos cómo filterImage y redrawCanvas. Estos métodos esperan una imágen y el canvas que se usará para aplicar el filtro:

Filtros disponibles

Lena.js ofrece una variedad de filtros que pueden ser aplicados a tu imágen. La siguiente lista muestra el ID de cada filtro:

  • red: Rojo
  • gaussian: filtro gaussiano
  • grayscale: escala de grises
  • highpass: highpass
  • invert: invertido
  • laplacian: filtro de laplace
  • prewittHorizontal: Prewitt Horizontal
  • prewittVertical: Prewitt Vertical
  • roberts: roberts
  • saturation: saturación
  • sepia: sepia
  • sharpen: sharpen
  • sobelHorizontal: sobel Horizontal
  • sobelVertical: sobel Vertical
  • thresholding: umbral

Los filtros son guardados en la misma variable global LenaJS y pueden ser accedidos a través de su ID usando la notación de punto o llave por ejemplo LenaJS["prewittHorizontal"] ó LenaJS.prewittHorizontal. Estas propiedades son funciones, sin embargo no son usadas directamente como una función por ti si no por la librería misma como una "constante".

Cómo funciona?

La magia sucede con el uso del método LenaJS.filterImage. Este método espera como primer argumento el canvas donde la imágen con el filtro debería ser renderizada, como segundo argumento el filtro (usandola como constante) que será aplicado y como último argumento el elemento IMG de la imágen a la que le aplicarás el filtro. La imágen puede estár cargada a través de un archivo usando el atributo src con la URL del archivo o bien usando una cadena de base64:

<!-- Imagen para aplicar filtros -->
<img id="original-image" src="./image.png" />
<!-- O con la representación data URI
    <img id="original-image" src="data:image/png....." />
-->

<canvas id="filtered-image"></canvas>

<script>
    // Obten la imágen
    var originalImage = document.getElementById("original-image");
    // El canvas donde la imágen procesada será renderizada
    var filteredImageCanvas = document.getElementById("filtered-image");

    // Filtro a aplciar, en este caso el filtro rojo
    var filter = LenaJS["red"];

    // Aplica el filtro
    LenaJS.filterImage(filteredImageCanvas, filter, originalImage);
</script>

Puedes finalmente exportar la imágen con el filtro aplicado simplemente obteniendo su representación en base64 con el método filteredImageCanvas.toDataURL("image/png").

Aplicando multiples filters

Como mencionamos, el método filterImage aplica un único filtro a una imágen y si lo ejecutas de nuevo, el filtro inicial es removido. Así que si deseas aplicar un filtro despues de otro, necesitarás usar el método redrawCanvas en su lugar. Este método espera como primer argumento el canvas donde una imágen con un filtro ya ha sido aplicado y renderizado. Como segundo argumento el nuevo filtro que será aplicado a la imágen:

<!-- Imágen original -->
<img id="original-image" src="./image.png" />
<!-- o con su representación data URI
    <img id="original-image" src="data:image/png....." />
-->

<canvas id="filtered-image"></canvas>

<script>
    // Obten la imágen
    var originalImage = document.getElementById("original-image");
    // El canvas donde será procesada la imágen que será renderizada con filtro
    var filteredImageCanvas = document.getElementById("filtered-image");

    // Filtro a aplicar, en este caso el filtro rojo
    var filter = LenaJS["red"];

    // Aplica el filtro inicial
    LenaJS.filterImage(filteredImageCanvas, filter, originalImage);

    // El segundo filtro a aplicar en este caso el invertir
    var secondFilter = LenaJS["invert"];

    // Aplica el segundo filtro (junto con el primer filtro que es aplicado)
    LenaJS.redrawCanvas(filteredImageCanvas, secondFilter);
</script>

Ejemplo en línea

Puedes jugar con el siguiente fiddle:

Además puedes probar otra demo en el sitio oficial del desarrollador.

Que te diviertas !

Esto podría ser de tu interes

Conviertete en un programador más sociable