#canvas2image

So this weekend inspired by a project a couple of friends are doing I decided I fancied hacking around with the HTML5 paste API.  This quickly and rapidly turned into Corkboard, which you can see at http://pastey.samatkinson.com.  Here's a corkboard of some of the photos  of me playing recently to satisfy my massive ego.

All in all I'd guess it's probably taken somewhere between 6-8 hours, of which most was due to my inability to RTFM and the fact Javascript hates me.  Most of the project is just mashing up a bunch of pre existing ingredients.

STRd6 imgpaste plugin

When googling around for how to do it, most of the stackoverflow esque threads had been jumped on by STRd6 to point to the plugin he wrote, and  I salute him, because it works a treat. You can find it at here.  It binds to the paste command, checks it it's an image, and if it is calls your callback with the file and the img encoded as a dataurl (particularly awesome/handy).  In no time I was pasting images to the top left of a blank page with a bit of jquery append() fun.

JQuery UI draggable and resizable

You can find these here and here respectively.  They should pretty much work out the box which is nice.  However, I wanted more than just images; If you mouse over an image you can remove it from corkboard. This was some CSS/JS magic lightly stolen from a friends project, but meant wrapping the image in a div.  I wasted a lot of time trying to figure out how to make the img resize at the same time as the div.  If you RTFM you'll discover this wonder:

$pasteimage .draggable() .resizable({ alsoResize: $pasteimage.find('img'), aspectRatio: true } )

 Pay special attention to alsoResize. This is the key to the gold.

To avoid manually generating the HTML at this point I created a simple template in handlebars.

Bootstrap

So now we can drag and resize images, but it's fugly.  Along comes bootstrap, the HTML5 UI starter package from the folks at Twitter. HIstorically I've always used foundation for making my sites pretty, but I wanted to branch out.  I've not done anything advanced, just a nav bar with drop down and a little form; The form inside nav bar situation is hard to do in foundation, so I was relieved to see it's built in in bootstrap.  I had my usual pebcak issues of incorrect ordering/import of CSS and JS, but once up and running, it was very easy to use, and I think overall looks nicer than foundation.

Save as an image

So one of the nice features about corkboard is that you can save it to your local machine as an image. This was a mashup of 2 plugins; HTML2Canvas and Canvas2Image. The first traverses the DOM of whatever element you pass it and renders it out as a Canvas; I imagine this may have issues if you're doing anything very funky in your code but it worked out the box on this. Canvas2Image then gives you a whole bunch of images for turning a canvas into an image, and for downloading it.  Both plugins worked seemlessly, pretty much first time. Very impressive.

html2canvas($('#theFunStuff'), { onrendered: function (canvas) { Canvas2Image.saveAsPNG(canvas); } })