Convertir una imagen a canvas y una imagen canvas a imagen

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

Gracias al siguiente código JavaScript podemos convertir una imagen a canvas y también realizar el proceso contrario, es decir, convertir una imagen canvas de nuevo en imagen.

Para conseguirlo, utilizamos el método drawimage:

function convertImageToCanvas(image) {
   var canvas = document.createElement("canvas");
   canvas.width = image.width;
   canvas.height = image.height;
   canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}

Las coordenadas 0, 0 en el canvas es donde la imagen se debe posicionar.

Para realizar el paso contrario, es decir, volver a convertir el canvas en imagen, deberemos utilizar el siguiente código:

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

Puedes ver una demostración de esta forma de convertir imagenes en canvas mediante JavaScript en el siguiente enlace demo canvas.

Sé la primera persona en comentar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.