miércoles, 12 de enero de 2011

Insertar imagen en Canvas html5

En este tutorial vamos a ver cómo poder insertar una imagen en el canvas de html5. Como vamos a ver es algo bastante simple.
Lo primero de todo es como ya sabemos crear el canvas con id canvas, para que nos vamos a complicar:

<canvas id="img" width="500" height="300">
</canvas>
Una vez creado el canvas todo lo demás es Javascript, todas las líneas están comentadas:

<script type="text/javascript">
 //Creamos una funcion que se ejecutará al iniciar la ventana
function img_canvas() {
  //recojemos el canvas poniendo la id del canvas html5 para relacionarlo
  var canvas = document.getElementById("img");
  //Cojemos la 2D para dibujar en él
 var context = canvas.getContext("2d");
  //creamos la nueva imagen 
  var img = new Image(500,500);
  //le decimos la ruta de la imagen, en este caso html5.jpg
 img.src = "jordan.jpg";
 //pasamos la imagen al 2d del canvas y se dibujará
 //en 0 0 podemos poner las cordenadas de donde empezar a dibujar la imagen
context.drawImage(img, 0, 0);
};
</script>
Ahora simplemente en html vamos a poner un link para que muestre la imagen:

<a href="#" onClick="img_canvas();">Mostra canvas con imagen (click aquí)</a>
En este ejemplo también hemos modificado el Body para que carge la imagen,para hacerlo mejor tendríamos que hacer un preload de la imagen en javascript, pero para el ejemplo he pensado que ya valía:

<body onLoad="img_canvas()">
Para ver el ejemplo en vivo haga click en el siguiente botón:

9 comentarios:

  1. como le puedo cambiar el tamaño de la imagen sin cambiar el tamaño del canvas? :S

    ResponderEliminar
  2. En la linea numero ... (no hay numero de lineas xD)

    en la linea que dice:

    //creamos la nueva imagen
    var img = new Image(500,500);

    esos 500 son anchura y altura de la imagen, simplemente modifica esos numeros. Gracias!!

    ResponderEliminar
  3. Hola alguien me puede ayudar, tengo que hacer que en una imagen de fondo se pueda dibujar con el mouse y esa grabarla como una nueva imagen.

    ResponderEliminar
    Respuestas
    1. Escribire un tutorial sobre eso encuanto tenga tiempo. gracias!

      Eliminar
    2. http://www.tutorialeshtml5.com/2012/01/exportar-imagen-desde-canvas-html5.html

      Eliminar
  4. quiero borrar una parte de la imagen como con clearRect() pero esa no me funciona como le hago?

    ResponderEliminar
    Respuestas
    1. Yo lo que hago es pintar un cuadrado de blanco o del color que sea el fondo como en el 'tutorial de interactuar con canvas' algo como esto:

      function limpiar(int x, int y){
      canvas = document.getElementById("canvas");
      ctx = canvas.getContext("2d");
      ctx.fillStyle = "white";
      ctx.fillRect(0, 0, x, y);
      }

      Espero averte ayudado, gracias!

      Eliminar
  5. Hola, muchas gracias. Tengo una duda, cuando llamas al document.getElementById("img"), en ese caso no debería ser: document.getElementById("canvas");
    Agraezco tu ayuda,
    Saludos.

    ResponderEliminar