jQuery Plugin for Client Side Image Resizing - canvasResize

canvasResize is a plugin works both with jQuery and Zepto that allows to auto resize/rotate client side images using HTML5 canvas tag. It's mobile-friendly and compatible with iOS6 and Android 2.3+.

Please note that server side uploading option does not work on jQueryscript.net. You can test it on your own server.

Basic Usage:

1.  Add jQuery library in your head section

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

2. Include necessary javascript files in your html page

<script src="jquery.canvasResize.js"></script> 
<script src="canvasResize.js"></script> 

3. Basic Usage

$('input[name=photo]').change(function(e) {
    var file = e.target.files[0];
    canvasResize(file, {
          width: 300,
          height: 0,
          crop: false,
          quality: 80,
          //rotate: 90,
          callback: function(data, width, height) {
          $(img).attr('src', data);
          }
    });
});

4. Options

width    : 300,     // Image width.
height   : 0,       // Image height, default 0 (flexible).
crop     : false,   // default false.
quality  : 80,      // Image quality default 80.
rotate   : 90,      // Image rotation default 0
callback : function(){},

Change Log:

v1.2.0 (2013-05-15)

• Fixed .png transparency and crop issues

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.