El proceso para cargar una imagen que podamos usar desde javascript consta de tres pasos:
- Crear un objeto Image.
var imagen = new Image();
- Especificar la función de callback
Es la función que se ejecuta cuando termine la carga de la imagen.
imagen.onload = callback;
Importante! la función de callback se especifica sin encerrarla en comillas y sin poner los paréntesis.
- Especificar la imagen
Puede especificarse mediante un camino relativo al archivo de imagen o mediante una url.
Una vez definida la fuente desde la que se debe cargar la imagen, la carga comienza inmediatamente, por lo que hay que si se quiere especificar una función de callback, debe especificarse antes de especificar la fuente de la imagen.
imagen.src="miImagen.jpg;"
Ejemplo
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas height="200px" id="my_canvas" style="border: 1px
solid #000000;" width="300px"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
var imagen = new Image();
imagen.onload = pinta;
imagen.src = "http://1.bp.blogspot.com/-t9kNjyxhS_k/" +
"UXRLc-tCXuI/AAAAAAAAAEQ/Gmn3RR06Org/s1600/canvas1.png";
function pinta(){
ctx.drawImage(imagen, 0, 0);
}
</script>
</body>
</html>
No hay comentarios:
Publicar un comentario