Avatar Image
Usuario habitual
Usuario habitual

Hola a todos...

Sucede que quisiera "voltear" o "rotar" una imagen (que esta horizontal) a vertical, he buscado por la red pero se me hace muy dificil y no encuentro nada, algun codigo que pudieran compartir conmigo?

gracias desde ya ;-)

Avatar Image
Moderador del foro
Moderador del foro

Dudo mucho que con HTML solo puedas hacerlo. Con JavaScript es poible, busca por Google "Rotar imagen con JavaScript".

Por ejemplo

Avatar Image
Usuario habitual
Usuario habitual

gracias por responder

pero creo q eso esta muy dificil para mi >.< , aunque vere si puedo encontrar algo mas facil, antes algunas preguntas sobre el codigo del link (a ver si puedo intentarlo, si no es como creo entonces ni pensar )

Spoiler:

<!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>test</title>
<script>
function rotar(obj,angulo){
    if (angulo >= 0) {
        var rotation = Math.PI * angulo / 180;  debo modificar estos grados?
    } else {
        var rotation = Math.PI * (360+angulo) / 180;
    }
    var costheta = Math.cos(rotation);
    var sintheta = Math.sin(rotation);
    if (document.createElement("canvas").getContext) {
    /* ---- canvas ---- */ 
        var c=document.createElement('canvas');
        c.width = Math.abs(costheta*obj.width) + Math.abs(sintheta*obj.height);
        c.style.width = c.width+'px';
        c.height = Math.abs(costheta*obj.height) + Math.abs(sintheta*obj.width);
        c.style.height=c.height+'px';
        c.id=obj.id;
        c.style.position='absolute';
        var ctx=c.getContext('2d');
        ctx.save();
        if (rotation <= Math.PI/2) {
            ctx.translate(sintheta*obj.height,0);
        } else if (rotation <= Math.PI) {
            ctx.translate(c.width,-costheta*obj.height);
        } else if (rotation <= 1.5*Math.PI) {
            ctx.translate(-costheta*obj.width,c.height);
        } else {
            ctx.translate(0,-sintheta*obj.width);
        }
        ctx.rotate(rotation);
        ctx.drawImage(obj, 0, 0, obj.width, obj.height);
        obj.parentNode.replaceChild(c,obj);
        ctx.restore();
    }else{
    /* ---- DXImageTransform ---- */
        obj.style.position='absolute';
        obj.style.filter="progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
        obj.filters.item(0).M11 = costheta;
        obj.filters.item(0).M12 = -sintheta;
        obj.filters.item(0).M21 = sintheta;
        obj.filters.item(0).M22 = costheta;
    }
}
window.onload=function(){
    rotar(document.getElementById('pp'),60);
    
}
</script>
</head>
 
<body>
<img src="1.jpg" width="180" height="127" />
<div id="ll" style="position:relative;"><img id="pp"(¿aqui va el link de la imagen?) src="1.jpg" width="180" height="127" /></div>
</body>
</html>

 

Avatar Image
@man / @woman
@man / @woman

Si no me falla la aritmetica a esta hora, deberías modificar aquí:

rotar(document.getElementById('pp'),60);

Avatar Image
Usuario habitual
Usuario habitual

gracias,

donde pongo el link de la imagen? :?)

Avatar Image
@man / @woman
@man / @woman

Este código que has posteado está mal: <img id="pp"(¿aqui va el link de la imagen?) src="1.jpg" width="180" height="127" /> 

Debería ser así: <img id="pp"src="(¿aqui va el link de la imagen?)" width="180" height="127" />

Lo pones donde quieras que aparezca.

Avatar Image
Usuario habitual
Usuario habitual

Hola; perfecto, funciona gracias!

ahora solo una ultima pregunta si quiero agregar mas de una imagen no hay modo que pueda insertarla ahi mismo, o debo pegar el mismo coooodigo otra vez cambiandole la direccion de la imagen

Avatar Image
@man / @woman
@man / @woman

Esto: <img id="pp"src="link de la imagen" width="xx" height="xx">

es como una unidad (una imagen), hará que muestra la imagen, si lo replicas 3 veces se verá 3 veces (una a continuación de la otra); si cambias el scr="link de la imagen" obtendrás 3 imágenes.

ATENCIÓN: Este tema no tiene actividad desde hace más de 6 MESES,
te recomendamos abrir un nuevo tema en lugar de responder al actual
Opciones:
Ir al subforo:
Permisos:
TU NO PUEDES Escribir nuevos temas
TU NO PUEDES Responder a los temas
TU NO PUEDES Editar tus propios mensajes
TU NO PUEDES Borrar tus propios mensajes
Temas similares
TemaUsuariosRespuestasVisitasActividad
Por: , el 31/Mar/2008, 22:14
Blackersoul chavp12kMar/08
Por: , el 14/Sep/2012, 16:23
addisripoll23kSep/12
Por: , el 13/Ene/2011, 01:10
wicho.kom fb@10000160875377317kJan/11
Por: , el 04/Nov/2010, 19:04
kotedas chavp333kNov/10
Por: , el 16/Feb/2005, 18:18
GC-Corporation User 390661 palray fb@1100211754710kMar/13