Published in: JavaScript
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>
