Skip to content
Javascript Canvas Resize Plugin. It can work both with jQuery and Zepto. It's compatible with iOS6 and Android 2.3+
Branch: master
Clone or download
Latest commit 1dfdae4 May 14, 2013
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENCE.md readme Mar 9, 2013
README.md version 1.2.0 .png transparency and crop issues fixed May 14, 2013
binaryajax.js
canvasResize.jquery.json jquery plugin May 14, 2013
canvasResize.js version 1.2.0 .png transparency and crop issues fixed May 14, 2013
exif.js recoded as native js Nov 2, 2012
index.html version 1.2.0 .png transparency and crop issues fixed May 14, 2013
jquery-1.7.2.min.js width and height correction for rotated images Oct 22, 2012
jquery.canvasResize.js version 1.2.0 .png transparency and crop issues fixed May 14, 2013
jquery.exif.js recoded as native js Nov 2, 2012
jquery.html version 1.2.0 .png transparency and crop issues fixed May 14, 2013
uploader.php version 1.2.0 .png transparency and crop issues fixed May 14, 2013
zepto.min.js coded as native js Nov 2, 2012

README.md

canvasResize

canvasResize is a plug-in for client side image resizing. It's compatible with iOS6.

It can work both with jQuery and Zepto

I fixed iOS6 Safari's image file rendering issue for large size image (over mega-pixel) using few functions from ios-imagefile-megapixel And fixed orientation issue by using exif-js

You can change image size and quality with plugin options easily.

Tested on:

  • Chromium (24.0.1312.56)
  • Google Chrome (25.0.1364.68 beta)
  • Opera (12.14)
  • IOS 6.1.2

You can check it on gokercebeci.com/dev/canvasresize.

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);
        }
    });
});

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(){},

License

It is under MIT License and It requires binaryajax.js and exif.js (or jQuery EXIF) to work which is also under the MPL License

Developer

goker

You can’t perform that action at this time.