[B]Girar imagen[/B]

marko249 · #1 (**permalink**) 19/05/2007, 12:51

Hola a todos

No soy muy experto en javascript y me gustaria saber si existe una manera de girar una imagen (por ejemplo 30 grados) en javascript

Le agradezco su colaboracion

Panino5001 · #2 (**permalink**) 20/05/2007, 21:06

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>