Foros del Web » Programando para Internet » Javascript »

[B]Girar imagen[/B]

Estas en el tema de [B]Girar imagen[/B] en el foro de Javascript en Foros del Web. 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) ...
  #1 (permalink)  
Antiguo 19/05/2007, 12:51
 
Fecha de Ingreso: septiembre-2004
Mensajes: 179
Antigüedad: 13 años, 11 meses
Puntos: 0
Exclamación [B]Girar imagen[/B]

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
  #2 (permalink)  
Antiguo 20/05/2007, 21:06
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.063
Antigüedad: 14 años, 2 meses
Puntos: 775
Re: Girar imagen

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>
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:12.