<html>
<head>
<title>Text to Image - RJM Programming - February, 2025 ... thanks to ImageMagick at https://imagemagick.org</title>
<style>
* {
vertical-align:top;
}
textarea {
font-size: 36px;
font-family: Courier;
padding: 0 0 0 0;
}
</style>
<script type=text/javascript>
function dodim() {
var tas=document.getElementsByTagName('textarea')[0].getBoundingClientRect();
if (document.getElementById('iwidth')) {
document.getElementById('iwidth').value='' + tas.width;
document.getElementById('iheight').value='' + tas.height;
document.getElementById('myiframe').style.width='' + tas.width + 'px';
document.getElementById('myiframe').style.height='' + tas.height + 'px';
} else {
document.getElementById('dimensions').innerHTML+='<input type=hidden id=iwidth name=width value="' + tas.width + '"></input><input type=hidden id=iheight name=height value="' + tas.height + '"></input>';
document.getElementById('myiframe').style.width='' + tas.width + 'px';
document.getElementById('myiframe').style.height='' + tas.height + 'px';
}
}
</script>
</head>
<body onload=dodim();>
<h1>Text to Image</h1>
<h3>RJM Programming - February, 2025</h3>
<table style='width:95%;height:90%;'>
<tr><th style='width:50%;'>Text</th><th> ... convert to Image</th></tr>
<tr><td id=tdl><form onsubmit=" dodim(); document.getElementById('myiframe').style.visibility='visible'; return true;" method=POST target=myiframe action='./cowsay.php'><textarea rows=10 style=width:100%;height:100%; name=text id=myta></textarea><br><br>
<div id=dimensions></div><input type=hidden name=noraw value=y></input>
<select onchange="document.getElementById('myta').style.fontFamily='' + this.value; document.getElementById('ffam').value='' + this.value;" id=myfontsel style=display:none; title='Font Family which ImageMagick recognizes'><option value=Courier>Courier</option></select> <input onblur="document.getElementById('myta').style.fontFamily='' + this.value;" type=text name=ffam id=ffam value='Courier' title='Font Family'></input> <input onchange="document.getElementById('myta').style.fontSize='' + this.value + 'px';" onblur="document.getElementById('myta').style.fontSize='' + this.value + 'px';" type=number min=0 step=1 name=ptsize id=ptsize value='36' title='Font Size'></input> <input onchange="document.getElementById('myta').style.color='' + this.value;" type=color title='Font Colour' name=fcol id=fcol value='#000000'></input> <input onchange="document.getElementById('myta').style.backgroundColor='' + this.value;" type=color title='Background Colour' name=bcol id=bcol value='#ffffff'></input> <input type=submit title=' ... via ImageMagick ... thanks ... https://imagemagick.org' value=Convert style=background-color:lightblue;></input></form></td>
<td id=tdr><iframe name=myiframe id=myiframe style='visibility:hidden;width:100%;height:80%;' src='/cowsay.php?fontlist=y'></iframe></td></tr></table>
</body>
</html>