Foros del Web - Ver Mensaje Individual - rotar horizontalmente texto e imágenes con javascript

madhatterdef · #9 (**permalink**) 24/01/2012, 00:55

Cita:

Iniciado por Panino5001

Fijate si te sirve esto:

Código PHP:

  <!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=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
function voltear(id){
    var cnv=document.createElement('canvas'),
    ctx=cnv.getContext('2d'),
    img=document.getElementById(id),
    w=img.offsetWidth,
    h=img.offsetHeight;
    cnv.width=w;
    cnv.height=h;
    ctx.translate(w,0);
    ctx.scale(-1,1);
    ctx.drawImage(img,0,0,w,h);
    document.body.appendChild(cnv);
}
onload=function(){voltear('i')};
</script>

</head>

<body>
<img id="i" src="arwen.jpg" />
</body>
</html>

Para texto canvas cuenta con el método fillText (investigando un poco podrás adaptar esto fácilmente para poder flipear el texto escrito en un campo de formulario):

Código PHP:

  <!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=utf-8" />
<title>Documento sin título</title>
<style>
*{ margin:0; padding:0}
#resultados canvas{ margin:10px}
</style>
<script type="text/javascript">
function voltear(id){
    if(document.getElementById('oldvolteado'))
        document.getElementById('resultados').removeChild(document.getElementById('oldvolteado'));
    var cnv=document.createElement('canvas'),
    ctx=cnv.getContext('2d'),
    img=document.getElementById(id),
    w=img.offsetWidth,
    h=img.offsetHeight;
    cnv.id='oldvolteado'
    cnv.width=w;
    cnv.height=h;
    ctx.translate(w,0);
    ctx.scale(-1,1);
    ctx.drawImage(img,0,0,w,h);
    document.getElementById('resultados').appendChild(cnv);
}
function procesar(t){
    var test=document.createElement('span');
    test.style.fontFamily='Arial';
    test.style.fontSize='12px';
    test.innerHTML=t;
    document.body.appendChild(test);
    var w=test.offsetWidth;
    var h=test.offsetHeight;
    document.body.removeChild(test);
    if(document.getElementById('oldcanvas'))
        document.getElementById('resultados').removeChild(document.getElementById('oldcanvas'));
    var cnv=document.createElement('canvas'),
    ctx=cnv.getContext('2d');
    cnv.width=w;
    cnv.height=h;
    ctx.fillStyle = 'rgb(0,0,0)';
    ctx.font = '12px Arial';
    
    cnv.id='oldcanvas';
    
    ctx.fillText(t, 1,12);
    ctx.textAlign="start";
    document.getElementById('resultados').appendChild(cnv);
    voltear('oldcanvas')
}
</script>

</head>

<body>
<form action="" method="get">
<input style="width:300px" name="txt" type="text" id="txt" /><input name="bt" type="button" id="bt" value="procesar" onclick="procesar(txt.value)" />
</form>
<div  id="resultados"></div>
</body>
</html>

muy bueno no conocía ese método

así es automático (el de texto)

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=utf-8" />
<title>Documento sin título</title>
<style>
*{ margin:0; padding:0}
#resultados canvas{ margin:10px}
</style>
<script type="text/javascript">
function voltear(id){
    if(document.getElementById('oldvolteado'))
        document.getElementById('resultados').removeChild(document.getElementById('oldvolteado'));
    var cnv=document.createElement('canvas'),
    ctx=cnv.getContext('2d'),
    img=document.getElementById(id),
    w=img.offsetWidth,
    h=img.offsetHeight;
    cnv.id='oldvolteado'
    cnv.width=w;
    cnv.height=h;
    ctx.translate(w,0);
    ctx.scale(-1,1);
    ctx.drawImage(img,0,0,w,h);
    document.getElementById('resultados').appendChild(cnv);
}
function procesar(t){
    var test=document.createElement('span');
    test.style.fontFamily='Arial';
    test.style.fontSize='12px';
    test.innerHTML=t;
    document.body.appendChild(test);
    var w=test.offsetWidth;
    var h=test.offsetHeight;
    document.body.removeChild(test);
    if(document.getElementById('oldcanvas'))
        document.getElementById('resultados').removeChild(document.getElementById('oldcanvas'));
    var cnv=document.createElement('canvas'),
    ctx=cnv.getContext('2d');
    cnv.width=w;
    cnv.height=h;
    ctx.fillStyle = 'rgb(0,0,0)';
    ctx.font = '12px Arial';
    
    cnv.id='oldcanvas';
    
    ctx.fillText(t, 1,12);
    ctx.textAlign="start";
    document.getElementById('resultados').appendChild(cnv);
    voltear('oldcanvas')
}
</script>

</head>

<body>
<form action="" method="get">
<input style="width:300px" type="text" id="txt" onkeyup="procesar(txt.value)" />
</form>
<div  id="resultados"></div>
</body>
</html>

el problema es que el resultado es un gráfico y no texto como quiere alette666 como solucionarías ese problema