TallTweets uses the HTML2Canvas library to convert text into PNG images. The generated images is converted into base64 (data URI) which is then sent to the server over a HTTP POST request for uploading to twitter.

Unlike the screenshots tool that performs the screen capture on the server side using a headless browser, here the image is generated directly in the user’s browser.

<!-- Input HTML text is inside the DIV -->
<div id="talltweets">The <b>quick brown fox</b> jumped over the <i>lazy dog</i>.</div>

<!-- The PNG image will be added here -->
<div style="background:yellow;padding:10px">
  <img id="textScreenshot" src="" />
</div>

<!-- Include the HTMl2Canvas library -->
<script src="//cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<script>
  html2canvas(document.getElementById('talltweets'), {
    onrendered: function (canvas) {
      var screenshot = canvas.toDataURL('image/png');
      document.getElementById('textScreenshot').setAttribute('src', screenshot);
    },
  });
</script>