Excuse me whilst I self indulge and reminisce…
I used to adore developing in Flash, it was and still is (it’s reach being limited quite rightly by Apple imho) wonderful the power of just placing a graphic where I wanted to, animating it how I liked, timing its appearance to precision at whatever point in time I chose for it to appear and providing a perfect interactive user experience. Well that’s what I thought anyway. Having cut my teeth marrying up the power of Macromedia Director 4 with Flash 4, the world of interaction had endless possibilities, only limited by the time available to you.
Hello HTML5
We were tasked a couple of months ago to build a web application that would have only been achievable using Flash alone a few years ago, but there goes mobile and tablet support out the window so what alternatives do we have? The answer is HTML5.
The Brief
The requirement was for the user to upload a photo, via their webcam if available or standard file upload if not (mobile assumes you are going to view your devices image library or use the camera, which is handy). Once uploaded, it was to allow the user to resize, skew & scale it then provide several decorations to drag onto it (moustaches, hats etc) – again being able to scale, skew & rotate them. Having completed the decoration, you could add a message beneath the polaroid together with a signature. This would then be converted to an image to be shared across social media such as Pinterest, Facebook & Twitter.
The solution
- fabric.js – http://fabricjs.com/
This is an HTML 5 canvas library that is absolutely fantastic. It allows you to draw items onto a canvas, set interaction options, background options, foreground pass-through images, z-indexing, capturing the canvas to raw image data for saving to the server. The library also provides support for touch devices and is extremely fast performing.
- webcam.js – https://github.com/jhuckaby/webcamjs
Another great library allowing us to take webcam snapshots in HTML5 based browsers including those without support to fallback to using Flash as an alternative.
- PHP
Another great web language for versatility and flexibility for saving data, images.
Wrapping it all up
To build an application like this would have been only achievable using Flash a few years ago, nothing else was available to do this. Its great now that HTML5 is maturing and is becoming more and more adopted, especially on mobile, which is great news for bringing more interactivity and richer user experiences. The key is having libraries such as Fabric.js which are invaluable to the adoption of HTML5, providing a lot of the ‘heavy lift’ of development and allowing developers to concentrate on the business logic and not the underlying technology as much. Obviously it doesn’t spare you from some of the intricacies of this type of development, especially when you add browser compatibility and mobile support into the mix, but it goes a long way in getting a project past feasibility stage.
