kozmoz / HTML5ProfileImageUploader

HTML5 widget for uploading an image. The scaling and cropping is done client side. Scaled version of the image is uploaded to the server through AJAX call.

HTML5 photo upload

Introduction

Drag 'n drop your photo (and leave the technical details to us)

HTML5 photo upload is a jQuery plugin to crop, scale and upload an image. It croppes the dropped or selected image at the predefined resolution and scales it down to fit automatically. For efficiency, cropping and scaling is performed on the browser side. The resulting image is uploaded to the server through an asynchronous call. This plugin exploits all of HTML5's possibilities, available in every modern browser.

Files are automatically uploaded as soon as they are added, no files are stored on the server.

Key features

• Ease of use
• Minimal interaction
• Fast

Demo

http://sandbox.juurlink.org/html5imageuploader/

Blog

http://blog.avisi.nl/2013/02/13/html5-drag-n-drop-photo/

Compatibility

It has been successfully tested in the following browsers:

• Chrome 19+
• Safari 5.1+
• Firefox 12+

Changes

Version 1.1 (2013-02-10)

• Added iOS6 Safari support
• Fixes iOS6 Safari's image file rendering issue for large size image
• Aware of rotation info saved within JPEG (EXIF)

Version 1.0 (2012-05-27)

• Initial release