an HTML5 offline image editor and uploader application

Many web applications use image uploaders: image hosting websites, blog publishing applications, social networks, among many others. Such uploaders have limitations: you can’t upload more than one file at a time and you can’t edit the image before sending it. A plugin is the usual workaround for uploading more than one image, and image modifications are usually done on the server side, which can make the editing process more cumbersome.

Firefox 3.6 offers many new Open Web features to web developers, including even more HTML5 support. This post describes how to create a sophisticated image editor and uploader built using Open Web technologies.

See below for a video of the demo with some background.

Hosted on hacks, publishes to twitpic

Our web application uploads pictures to twitpic, an image hosting service for Twitter.

Note that code for this application is actually hosted on the hacks web server but can still upload to Twitpic. Uploading to Twitpic is possible because they opened up their API to Cross Domain XMLHttpRequests for applications like this. (Thank you twitpic!).

Web Features

The demo uses the following features from HTML5 included in Firefox 3.6:

HTML5 Drag and Drop: You can drag and drop items inside of the web page and drag images from your desktop directly into the browser.

HTML5 Application Cache: This allows you to create applications that can be used when the browser isn’t connected to the Internet. It stores the entire app in the browser and also gives you access to online and offline events so you know when you need to re-sync data with a server.

HTML5 Canvas: The HTML5 Canvas element is used through this demo to edit and render images.

What’s in the demo?

You can drag images from your desktop or the web into the application.

You can see a preview of each image you want to upload.

You can drag previews to the trash to delete an image.

Images are automatically made smaller if they are bigger than 600px wide.

You can edit any of the images before uploading. This includes being able to rotate, flip, crop or turn an image black and white.

If you edit an image it’s saved locally so you can still edit when you’re offline. If you close the tab, restart Firefox or your computer they will be there when you load the page again so you can upload when you’re re-connected.

It will upload several files at once and provide feedback as the upload progresses.

The HTML5 Offline Application Cache makes the application load very quickly since it’s all stored offline.

Under the Hood

Let’s quickly go over all of the technology that we’re using in this application.

Cross-XMLHttpRequest

Twitpic was nice enough to open their API to allow XMLHttpRequests from any other domain. This means that you can now use their API from your own website and offer your own image uploader.

If you’re running a web site with an API you want people to use from other web sites, you can do that with Cross-site HTTP requests. In order for you to support it you will need to add an HTTP header to responses from your web server that says which domains you allow. As an example, here’s how twitpic allows access from all domains:

Access-Control-Allow-Origin: *

It’s important to note that opening your API does have security implications so you should be careful to understand those issues before blindly opening an API. For more details, see MDC documentation on CORS.

Canvas to Edit Images

Once images have been dragged and dropped into the web page, the image uploader lets you edit them before uploading. This is possible because images are actually copied to canvas elements via the File API.

In this case, the editing process is really basic: rotate, flip, add text, black and white, crop. However, you can imagine offering many other features in your version of the editor (see Pixastic for example, or this inlay feature here).

Using canvas and the File API also let you resize the image before sending it. Here, every image is converted to a new image (canvas) that is less than 600px.

localStorage: Save Local Data

It’s possible to store local data persistently in a web page using localStorage, up to 5Mb of data per domain.

In the image uploader, localStorage is used to store images and credentials. Since images are actually canvas, you can store them as data URLs:

LocalStorage support means that you can edit an image, close Firefox, switch off your computer, and the edited image will still be there when you restart Firefox.

Offline

If you add a manifest file listing all remote files needed to display your web application it will work even when you aren’t connected to the Internet. A nice side effect is that it will also make your application load much faster.

Conclusion

Firefox 3.6 allows millions of people to take advantage of modern standards, including HTML5.
The image uploader described here shows how a web page should really be considered as an application since it interacts with your Desktop and works offline.

Here are a few tips for writing your next application using Open Web technologies:

Allow Cross-XMLHttpRequest:
If it makes sense for your service, allow people to access your API from a different domain, you’ll be amazed at the apps people will come up with.

Allow multiple input:
Let people Drag files to your application and use <input type="file" multiple=""> so they can select several files at once. In this demo, we use a multiple input which is visible only in the mobile version, but for accessibility consideration, don’t forget to use it to propose an alternative to Drag’n Drop.

Use native Drag and Drop:
Drag and Drop mechanisms are usually simulated (updating coordinates on the mousemove event.) When you can, use the native mechanism.

Use the File API
To pre-process a file before even talking to a server.

Support offline
Store data and use a manifest to make your application data persistent while offline.

Use Canvas
Canvas is the most widely implemented HTML5 element. It works everywhere (even if it has to be simulated), use it!

Think “Client Side”: HTML5, CSS3 and the new powerful JavaScript engines let you create amazing applications, take advantage of them!

We look forward to seeing the great new applications you’ll come up with using Open Web technologies!

[…] your image into serverUploaded pics in TwitPicYou can also check the official blog post at Mozilla Hacks here.So what do you think? Did it really makes your work simpler? Share your feeling in form of […]

Impressive, sure.
We all wait now for an upgrade in Prism (which is levelled at Gecko 1.9.1) in order to benefit from the whole new API in webapps !

BTW, is someone able to tell me if it’s now possible to develop a SIP client into Firefox?
A SIP client able to do video and audiophoning (that means able to encode/decode Theora and encore/decode vorbis as well as to speak SIP).
db

I don’t have Jetpack installed (never have) and it still doesn’t work on Ubuntu. When I drag an image over the drop zone it changes size indicating it notices I’m dragging an image, but when I drop it nothing happens.

There is one thing I don’t understand how to do ! I looked to the source code, but I still didn’t understand.
When you drag an image to send it to the trash it will “delete” the original thumb and display only the one which is being deplaced. This is not the default behavior with draggable-image, how are you doing this ?

I am a chrome user because Firefox gives me problems many times. But because of this application I will be friendly to Firefox now. I just really need an HTML5 offline editor. I am a massive picture uploader and if possible I don’t want limitations, so this application is such a gift to me.

Bummer! I don’t use a lot of Firefox because it’s turtle slow. But it seems I have no choice now coz I want this html image editor very badly. I’m off the Photoshop thing now and I want something new. But I hope picasaweb will get one pretty soon. I can’t wait!