Blog

Monocrome : Plugin de jquery para escala de grises

Hace poco para Royal Estudios tuve que crear un efecto donde deseábamos mostrar las imágenes que subíamos por WordPress a imágenes en escala de grises sin utilizar el método antiguo de sprites como los siguientes:

Y encontré unos otros, sin embargo no funcionaba para lo que quería un simple plugin donde cambiara las imágenes de colores a escala de grises.

Ahora este es el plugin, jquery Monocrome, yo se que monócromo solo es de 2 colores sin embargo quería darle un nombre singular y no tan largo.

Espero que lo utilicen, basé parte de mi código en el plugin BlackandWhite. Con varias modificaciones y nuevas características.

Uso

Añadimos jquery y el archivo del plugin:

<script src=”scripts/jquery-1.6.4.min.js” type=”text/javascript”></script>
<script src=”scripts/jquery.monocrome.js” type=”text/javascript”></script>

Luego tenemos nuestros elementos:

<div class="wrap">
<img src="el path" />
</div>

o también solamente así:

<img src="el path" class="convert" />

Añadimos la sentencia de javascript y viola!

jQuery(function($){
//Si deseas convertir una imagen que este dentro de un elemento
$('.wrap').monocrome();
o si quieres convertir la imagen directamente
$('img').monocrome({ isImage : true });
});

Opciones:

isImage – Opcion que le dice al plugin si es es una imagen o si es un elemento con una n cantidad de imágenes.

hideOriginal – si deseas quitar el elemento original del DOM.

Implementaciones Futuras

  1. En la siguiente versión intentare modificar también los backgrounds creados por CSS.
  2. Esperar por el proximo borrador para el canvas y ver la solución para el problema de seguridad

Inconvenientes conocidos

  • Actualmente estoy teniendo problema en un Array cuando solo tiene un elemento, esto solo en Chrome.
  • El script puede no correr localemente, es decir no en servidor con una direccion C://midirectorio por un problema de seguridad creado por getimagedata(), espero que en el futuro se arregle eso. Pero al subirlo al servidor estará funcionando al 100%