Update: reorganized a little. Added link to JavaScript Weekly.
The webpage code below does what you ask, albeit basically and
without Perl: enter text, get fancy image version dynamically,
download with a click. 70 lines of "code." Half HTML, half JS.
Like pryrt, I recommend GD; and png as the default
output for text oriented stuff. I used GD a lot in the distant past
and liked the results but was never particularly happy with coding
with it or its limitations. The HTML5+JS I'm sharing is, to me, more
fun and interesting. It works on Firefox and Chrome. Early test of it
worked on IE11 but current code has an issue blocking the font usage.
No <spoiler/> because I don't expect this thread to grow.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* { overflow: hidden } /* you know why, you pervert */
html,body { width: 100%; height:100%;
padding:0; margin:0;
background-color:#fff; color:#000; }
a { text-decoration:none }
</style>
<title>Cernverse Fonting and Dernlards</title>
</head>
<body>
<div style="padding:10% 0; float:left; width:100%">
<div style="float:left; width:30%; text-align:right;">
<input id="gi" type="text" style="width:66%; margin-top:12px; fo
+nt-size:24px">
</div>
<div style="float:left; width:65%; text-align:left;">
<div>
<a target="_blank" id="gd" download="MUH-TXTZ">
<canvas id="go" height="100" width="100"></canvas>
</a>
</div>
<sup id="downloadNote" style="display:none;margin-left:2em">
<i>Click text image to download it.</i>
</sup>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery
+.min.js"></script>
<script>
jQuery(function($) {
$("head").append($('<link rel="stylesheet" href="https://fonts.googl
+eapis.com/css?family=Lobster Two">'));
let fontSpec = '48px/1.2 "Lobster Two"';
let enterSomething = "Enter something…";
function renderText(txt){
if ( ! ( txt && txt.length && txt.match(/\S/) ) )
txt = enterSomething;
let $phantom = $("<span/>");
$phantom.css({ font:fontSpec
,display:"none" })
.text(txt);
$("body").append($phantom);
let width = $phantom.width();
let height = $phantom.height();
$phantom.remove();
let canvas = $("#go").get(0);
let ctx = canvas.getContext("2d");
ctx.canvas.width = width + 20;
ctx.canvas.height = height + 10;
ctx.font = fontSpec;
ctx.textBaseline = "top";
ctx.fillText(txt, 10, 5 );
$("#gd").prop({ "href":canvas.toDataURL() });
$("#downloadNote").fadeIn("slow")
}
$("#gi").attr({ placeholder:enterSomething })
.on("keyup", function(evt){
renderText( $(evt.target).val() );
});
});
</script>
</body>
</html>
Two reasons I post this. One, it's really fun so I wanted to try
it. I knew it was possible but I'm quite behind on this stuff. Despite
some boiler plate and annoying font metrics shortcomings in
canvas—which was much easier to get around than most folks on
various forums seemed to think—it was really quite easy.
And two, I say y'all aren't scared of the right things.
ECMAScript/JavaScript has been in the process of evolving into a
kickass language; improving syntax, affording asynchronous programming
in ways that are increasingly easy to follow, better scoping, and
plenty more. It scares me how far behind I am.
It's been ubiquitous in the browser for decades now. Its serverside
presence and toolchain is bigger and better every day. Perl 6 is
not (yet) a real threat to Perl 5. Python and Ruby are mild threats,
yes, but ES/JS has eaten ActionScript/Flash's lunch already and it's only
getting hungrier; pulling in more and more smart devs who are making
some incredible stuff with it.
Update:
JavaScript Weekly is a great resource. The
current batch of articles cover new features in ECMAScript 2018 which include
lookbehind and named captures in regular expressions and asynchronous iteration.
I wish I had the knowledge to do a tutorial or recommend reading.
As I mentioned, I'm not qualified. The stupid example above, all 35
lines of actual code, took me a couple hours, for example. Anyone who
knew what she was doing could have thrown a bombproof version of the
idea together in 10 minutes.
What this is missing is a font loading check, a little more error
guarding, a font/webfont picker, and a trim function so the image can be cropped down to the
minimum dimensions matching actual content. I looked at
trim-image but didn't have
the patience today.
The only thing Perl here is that I always do this kind of
development with a command line Plack server. I can edit my HTML and
do whatever without worrying about the webserver wherever I am
working.
plackup -p 5000 -MPlack::App::Directory \
-e 'Plack::App::Directory->new({root => q{.}})->to_app'
:P
|