Do this with Javascript: Greeting Cards

02.21.2014

Web apps are becoming more complex and more than just documents that display information and provide some dynamic interaction. Nowadays, people expect features that would normally only be found in desktop apps such as generating images with javascript.

I've been playing around with <canvas> and it has a little neat feature that let's you represent the image as a URL (data URL) which you can just put in a browser's location bar and it will work.

So with it, I wrote a little greeting card maker. Just fill it out and click download, and you've got a card that was made entirely in the browser.

The magic comes from the html2canvas library that takes in an HTML Element and spits out an image representation of it. It's very light and since it's done client side, there's no latency in getting it to the user. You can do all sorts of cool things like generate documents, testing or even corny greeting cards.