Convertir una imagen a canvas

Veremos un sencillo método para convertir una imagen normal (jpg, png, etc.) a canvas, quedando así:

	»
Imagen original		Canvas

Lo haremos mediante el siguiente código JavaScript...

<script><br /> // Obtiene la imagen con el ID "itc" (image to canvas)<br /> var sampleImage = document.getElementById('itc'),<br /> <br /> // Convierte la imagen a canvas (sin imprimirla en pantalla aún)<br /> canvas = convertImageToCanvas(sampleImage);<br /> <br /> // Crea el contenedor donde colocaremos la imagen convertida<br /> document.getElementById("atril").appendChild(canvas);<br /> <br /> // Dibuja el nuevo canvas con las dimensiones de la imagen original (no CSS)<br /> function convertImageToCanvas(image) {<br /> var canvas = document.createElement("canvas");<br /> canvas.width = image.width;<br /> canvas.height = image.height;<br /> // Inserta la nueva imagen<br /> canvas.getContext("2d").drawImage(image, 0, 0);<br /> return canvas;<br /> }<br /> </script>

Aparte de eso, lo único que necesitamos es una imagen con el ID "itc" y un elemento (div, span, p, etc.) con el ID "atril", donde se colocará el nuevo canvas:

<img src="IMAGEN.png" id="itc" /><p id="atril"></p>

Una de las ventajas de este método es que evita gran parte de los robos de imágenes. Además, como veremos en futuros tutoriales, una vez transformada, la imagen puede modificarse mediante JavaScript tanto como si estuviésemos usando Photoshop (o más, porque puede animarse o volverse interactiva)...