DevilsDuke.com

Till now all of  you used Online image editors.Do you think of an Offline Image Editor that runs in a browser and can do everything like cropping,resizing,rotating and black and white operations before uploading into any of image hosting server? Mozilla created a web application with the help of the latest technology HTML 5 that work with Mozilla Firefox 3.6 and twitpic a free twitter image hosting service.You can check the live demo of  HTML 5 Offline Image Editor.

Offline image editor with HTML 5

Why is Offline Image Editor?

Daily when we are uploading images to image hosting servers , we face the following problems

1. If you want to edit an image that you want to put on your blog post, you can do it only after the image uploaded into the image hosting server.
2. If you are using a less bandwidth internet connection ,like me (Mostly Indians face this problem) , it takes more time to load an image editing program from the server.
3. What happens if your internet disconnected when you are uploading an image? It won’t resumes from  that point.It has to start from the beginning.
4. You cannot upload more than one image at a time if you have multiple images.Or some restriction may be there like 5 images max.

What is Offline Image Editor?

It is an HTML 5 based Firefox 3.6 application that can solve all the above problems.

Here’s a full list of the things that this application can do

• 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 give feedback as the upload progresses.
• The HTML 5 Offline Application Cache makes the application load very quickly since it’s all stored offline.

The demo includes the following features of HTML 5 included in Firefox 3.6

• HTML 5 Drag and Drop

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

• HTML 5 localStorage

  With this feature we can save the data of the image even browser restarts.

• HTML 5 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.

• HTML 5 Canvas

  The HTML 5 Canvas element is used through this demo to edit and render images.

• Cross-origin resource sharing

  to host an application at one site and publish data to another.

Here are the screenshots

Offline image editor 1 with HTML 5

Offline Image Editor 2 with HTML 5

Offline Image Editor 3 with HTML 5

Rotation with Offline Image Editor

Black and White with Offline Image Editor

Naming a image with Offline Image Editor

Sign in into your twitpic account

Uploading your image into server

Uploaded pics in TwitPic

You 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 Comments.

More from Devils Duke

• Firefox 3.6 hacks for Windows7
• Firefox 3.6 is going to release today at 9.30am
• Upcoming Firefox 3.6 can move with your Machine!!!
• Jntu 3-2 IT I mid online bits
• Firefox 3.6 crossed 2.4 million downloads in 24hrs

Tags: Drag and Drop, Firefox 3.6, HTML5, mozilla hacks, offlilne image editor

This entry was posted on Tuesday, February 2nd, 2010 at 11:26 PM and is filed under Firefox, Web browsers. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.