Rotar una imagen

A partir de lo que hemos aprendido en los dos posts anteriores: Transformaciones en el canvas y Guardar y restaurar el contexto del canvas vamos a escribir una función con la que rotar fácilmente una imagen.

• drawImageR(context, image, x, y, angle)

La hemos llamado drawImageR para diferenciarla de drawImage y para dar una pista de que sirve para rotar imágenes. Los argumentos son el contexto del canvas en el que dibujar, la imagen, las coordenadas x, y en las cuales dibujar la imagen y el angulo de rotación en radianes (respecto al centro de la imagen).
La forma de usarla difiere de la función drawImage porque drawImage es un método del contexto del canvas, mientras que drawImageR no, por lo tanto, sea ctx el contexto del canvas, haremos:

ctx.drawImage(...)

o

drawImageR(ctx, ...)

La función se puede modificar y ampliar para cubrir otras necesidades específicas, como por ejemplo rotar la imagen respecto a otro punto distinto del centro o dibujar un trozo específico de la imagen, como permiten las versiones con más parametros de drawImage.

La definición de drawImageR es la siguiente:

  function drawImageR(context, image, x, y, angle){
 var w_half = image.width/2;
 var h_half = image.height/2;

 context.save();
 context.translate(x + w_half, y + h_half);
 context.rotate(angle);
 context.drawImage(image, -w_half, -h_half);
 context.restore(); 
  }

Ejemplo

Un ejemplo sencillo, suponiendo que en la carpeta /images tenemos la imagen 1.jpg (un cuadrado con la mitad izquierda roja y la mitad derecha verde) usaremos la función ya conocida loadImages para cargarla y después dibujaremos una copia rotada y otra sin rotar, en la misma posición.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <canvas id="my_canvas" width="300px" height="200px"
 style="border:1px solid #000000;"></canvas> 
 <script type="text/javascript">
  var canvas = document.getElementById('my_canvas');
  var ctx = canvas.getContext('2d');
  var images = loadImages('./images/1.jpg', load_done);
  var cuadrado = images[0];
      
  function drawImageR(context, image, x, y, angle){
 var w_half = image.width/2;
 var h_half = image.height/2;

 context.save();
 context.translate(x + w_half, y + h_half);
 context.rotate(angle);
 context.drawImage(image, -w_half, -h_half);
 context.restore(); 
  }
  
  function loadImages() { //images and callback
 var n = arguments.length - 1;
 var callback = arguments[n]
 var images = new Array();
 var count = 0;
 
 for (i = 0; i < n; i++) {
  images[i] = new Image();
  images[i].onload = function(){
   count++;
   if (count == n){
    callback ();
   };
  };
  images[i].src = loadImages.arguments[i];
 };
 return images;  
}

 function load_done() {
  drawImageR(ctx, cuadrado, 20, 50, 45*Math.PI/180);
  ctx.drawImage(cuadrado, 20, 50);
 }
 
 </script> 
</body>
</html>

Transformaciones en el canvas

Este post tiene una continuación en la entrada: Guardar y restaurar el contexto del canvas.
Las transformaciones básicas en el  canvas son 3: traslación, rotación y escalado.
La forma en que funcionan es poco intuitiva puesto que lo que hacen no es trasladar, rotar y escalar elementos en el canvas sino que actúan sobre el origen y los ejes de coordenadas del canvas, modificando su posición, orientación y escala, de forma que los elementos dibujados antes de una transformación permanecen inalterados y los que se dibujen después de aplicar la transformación son afectados por ella.
Las transformaciones se aplican sobre el contexto del canvas.

Traslación

context.translate(x,y)
Traslada el origen de cordenadas del canvas desde la esquina superior izquierda al punto x,y.

Rotación

context.rotate(radianes)
Rota los ejes de coordenadas en torno al origen, un angulo especificado en radianes, en sentido horario. Para pasar de grados a radianes:
angulo_en_radianes = angulo_en_grados * (Math.PI/180)

Escalado

context.scale(factorX, factorY)
Mutiplica las coordenadas en el eje X e Y por el factorX y el factorY.

Ejemplo

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <canvas id="my_canvas" width="300px" height="200px"
 style="border:1px solid #000000;"></canvas> 
 <script type="text/javascript">
  var canvas = document.getElementById('my_canvas');
  var ctx = canvas.getContext('2d');
      
  var x = 10;
  var y = 10;
  var w = 50;
  var h = 50;
  var factorX = 0.5;
  var factorY = 0.5;
  
  // escalado
  ctx.scale(factorX, factorY);
  
  ctx.fillStyle = "#ff0000"; // rojo
  ctx.fillRect(x, y, w, h);
  
  // traslación
  ctx.translate(100, 50);
  
  ctx.fillStyle = "#00ff00"; // verde
  ctx.fillRect(x, y, w, h);
  
  // rotación
  ctx.rotate(30 * Math.PI/180);
  
  // dibujamos el nuevo eje x
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(50,0);
  ctx.stroke();
  
  // y el nuevo eje Y
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(0,50);
  ctx.stroke();
  
  ctx.fillStyle = "#0000ff"; // azul
  ctx.fillRect(x, y, w, h);
 
 </script> 
</body>
</html>

En el ejemplo se puede probar a cambiar la escala, cambiando factorX y factorY. El ejemplo tiene factorX = 0.5 y factorY = 0.5 (mitad de escala). El tamaño normal se consigue con factorX = 1, factorY = 1 y el doble de tamaño se consigue con factorX = 2, factorY = 2.

Este post tiene una continuación en la entrada: Guardar y restaurar el contexto del canvas 

Cargador de imágenes

En un post anterior ya vimos como cargar una imagen. El proceso incluía crear un objeto imagen para cada imagen a cargar, definir una función a ejecutar cuando termise la carga y por último, especificar la localización de la imagen. Es un proceso laborioso que puede hacerse un poco pesado. A continuación presentamos un sencillo cargador de imágenes que nos permitirá especificar todas las ubicaciones de las imágenes a cargar a la vez y una única función de callback para cuando terminen de cargarse todas ellas.
Conviene guardar el código siguiente en un archivo aparte, por ejemplo "loadImages.js" para poder incluirlo fácilmente en aquellos proyectos en los que necesitemos cargar varias imágenes de forma sencilla.

// loadImages.js
// arguments:
//  string urls with location of images to load
//  callback function
// returns:
//  array of Image objects

function loadImages() { //images and callback
 var n = arguments.length - 1; // number of images to load
 var callback = arguments[n]
 var images = new Array();
 var count = 0;
 
 for (i = 0; i < n; i++) {
  images[i] = new Image();
  images[i].onload = function(){
   count++;
   if (count == n){
    callback ();
   };
  };
  images[i].src = loadImages.arguments[i];
 };
 return images;  
}

Uso

La función loadImages devuelve un array que contiene las imágenes cargadas. Acepta un número variable de argumentos. Los argumentos serán cadenas de texto especificando la ubicación de las imagenes a cargar, excepto el último argumento, que será la función de callback, que debe especificarse sin comillas y sin los paréntesis de la llamada, como en el siguiente ejemplo:

<!DOCTYPE html>
<html>

    <head>
    <script type="text/javascript" src="./loadImages.js"></script>
    <script type='text/javascript'> 

 function load_done() {
            text = "Images loaded:<br>";
         for(var i=0; i< images.length; i++)
  {
      text += images[i].src + "<br>";
  }
  document.write(text);
 }
   
 var images = loadImages('./images/im1.jpg',
    './images/im2.jpg',
    './images/im3.jpg',
    './images/im4.jpg',
    './images/im5.jpg',
    './images/im6.jpg',
    './images/im7.jpg',
    './images/im8.jpg',
    './images/im9.jpg',
    load_done);
    </script>
    </head>

    <body>
    </body>

</html>

En este ejemplo hemos especificado las ubicaciones relativas de las imágenes a cargar, pero también se podría haber usado caminos absolutos e incluso urls como

'http:\\www.lapaginaquesea.com\imagencualquiera.jpg