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>
