Notas Espacio Programación

Rotando imágenes con JavaScript

Para rotar imágenes lo más común es usar lenguaje de servidor. En PHP, por ejemplo, lo normal sería usar la función imagerotate de la librería GD. En javascript, hasta que se extendió el soporte canvas a casi todos los navegadores, había un camino tortuoso que consistía en crear capas que mostraran sólo un pixel de la imagen en la posición que correspondia a la rotación que queríamos lograr, la cual calculábamos con un poco de trigonometría. Sin embargo esto era inviable para imágenes de tamaño mediano, ya que, como estábamos obligados a crear un bucle con tantas iteraciones como pixeles hubiese en la imagen a rotar, el proceso se hacía muy lento y/o consumía mucha memoria.
Afortunadamente canvas ya es soportado por todos los navegadores modernos excepto Explorer. No obstante esto, Explorer cuenta con un filtro propietario que nos ayudará en nuestra tarea. Este es un ejemplo de lo que podremos lograr utilizando la función que presentamos más abajo: