OT, OT to the max: Re: Image Library Preferences

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>
[download]

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'
[download]

Comment on OT, OT to the max: Re: Image Library Preferences Select or Download Code


Come for the quick hacks, stay for the epiphanies.
	PerlMonks