Morton 15 de junio de 2012 a las 07.11
   Imprimir artículo
elWebmaster.com

Javascript: C贸mo convertir una imagen a canvas, y viceversa


javascriptwide2No hay dudas que JavaScript es una gran herramienta que nos brinda amplios recursos. En este art铆culo no s贸lo les explicaremos como convertir su imagen a canvas, sino que a su vez indicaremos los pasos para convertir el canvas de vuelta en imagen.

Para poder lograr esto, deberemos usar el m茅todo drawimage:

  1. function convertImageToCanvas(image) {
  2.   var canvas = document.createElement("canvas");
  3.   canvas.width = image.width;
  4.   canvas.height = image.height;
  5.   canvas.getContext("2d").drawImage(image, 0, 0);
  6.  
  7.   return canvas;
  8. }

Las coordenadas 0, 0 en el canvas es donde la imagen debe estar posicionada.

Para volver a convertir el canvas en imagen, deberemos en cambio, utilizar el siguiente c贸digo:

  1. function convertCanvasToImage(canvas) {
  2.   var image = new Image();
  3.   image.src = canvas.toDataURL("image/png");
  4.   return image;
  5. }

Con esto obtendr谩s una imagen en formato PNG.

Uno de los principales usos de convertir tu imagen a canvas y luego revertir este proceso, es el poder aplicar determinados filtros. Este es uno de los recursos utilizados por la famosa aplicaci贸n Instagram. 隆Esperamos que te sea de utilidad!

Fuente original del art铆culo: David Walsh Blog
Traducci贸n realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder