Javascript no es la herramienta adecuada para eso. Algunos lenguajes de servidor te ayudarán de manera más sencilla y eficiente. En php por ejemplo, existe la función
imagerotate que te serviría perfectamente para esa tarea.
Igualmente, en javascript podrías hacer algún algoritmo lento y con resultados no muy buenos, como este:
imagerotate js.
Establecí una rotación de 5 grados, ya que a mayor ángulo peor resultado. La técnica que usé fue seccionar la imagen en cuadrados de 5 pixeles. Si hubiera usado 1 pixel, la calidad hubiera sido buena, pero con 1 pixel funcionaba más lento todavía.
El código fuente es este:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>imagerotate</title>
<script>
function calculapos(x,y,dif){
difr=dif*2*Math.PI/360
dist=Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
angulo=(Math.atan(y/x))
nx=dist*Math.cos(angulo+difr);
ny=dist*Math.sin(angulo+difr);
return {nuevax:nx,nuevay:ny}
}
function rotar(im,ang,dest,ancho,alto){
c='';
for(i=1;i<ancho+1;i+=5){
for(j=1;j<alto+1;j+=5){
desp=calculapos(i,j,ang);
despx=desp.nuevax
despy=desp.nuevay
c+='<div style="position:absolute; top:'+(despy+250)+'px; left:'+(despx+220)+'px; width:5px; height:5px; clip:rect(0px,5px,5px,0px)"><img src="'+im+'" style="position:absolute; top:'+(0-(j))+'px; left:'+(0-(i))+'px"></div>';
}
}
document.getElementById(dest).innerHTML=c;
}
</script>
</head>
<body onload=rotar('uno.jpg',5,'destino',315,210)>
<img src="uno.jpg" hspace="200" vspace="10" />
<div id="destino"></div><br />
</body>
</html>