Browser Apps

Build an Image Editor With EaselJS, jQuery, and the HTML5 File API - Tuts+ Premium


In this Premium tutorial, using the HTML5 Canvas and File APIs, we'll create a full-blown picture editor, with features on par with some desktop applications - including simple transformations like skewing and rotating, and more complicated filters like Gaussian blurring, embossing, and edge detection. For this, we will use the EaselJS library and jQuery.

Premium Preview

Let's take a look at the final result we will be working towards:

HTML5 EaselJS jQuery Image Editor
Click to try the demo.

Note the huge set of features:

  • Ability to load and save image files from and to your hard drive
  • Built-in print capability (that doesn't print the UI elements)
  • Undo/redo memory
  • Multiple layers, including text layers
  • Simple transformations: scale, rotate, skew, flip
  • Complex filters: brightness, colorify, blur, emboss, sharpen, and more
  • Basic scripting capabilities

...all coded in JavaScript, using jQuery, HTML5, and EaselJS.

Rather than explaining how to build this app line-by-line from scratch, the tutorial starts from the finished source code and explains how each section works, as well as the theory behind concepts such as the Gaussian blur filter. The full source code is also available to download and modify.

Read the Full Tutorial

Premium members can access the full tutorial right away!

If you're not yet a Premium member, you can still read the first few steps for free.

Tuts+ Premium Membership

We run a Premium membership system which periodically gives members access to extra tutorials, like this one, from across the whole Tuts+ network. If you're a Premium member, you can log in and read the tutorial. If you're not a member, you can of course join today!

Also, don't forget to follow @envatoactive on twitter, circle us on Google+, like us on Facebook, and grab the Activetuts+ RSS Feed to stay up to date with the latest tutorials and articles.

Related Posts