Croppie - a simple javascript image cropper

Basic Example


var basic = $('#demo-basic').croppie({
    viewport: {
        width: 150,
        height: 200
    }
});
basic.croppie('bind', {
    url: 'demo/cat.jpg',
    points: [77,469,280,739]
});
//on button click
basic.croppie('result', 'html').then(function(html) {
    // html is div (overflow hidden)
    // with img positioned inside.
});

x

Vanilla Example


var el = document.getElementById('vanilla-demo');
var vanilla = new Croppie(el, {
    viewport: { width: 100, height: 100 },
    boundary: { width: 300, height: 300 },
    showZoomer: false,
    enableOrientation: true
});
vanilla.bind({
    url: 'demo/demo-2.jpg',
    orientation: 4
});
//on button click
vanilla.result('blob').then(function(blob) {
    // do something with cropped blob
});

Upload Example (with exif orientation compatability)


$uploadCrop = $('#upload-demo').croppie({
    enableExif: true,
    viewport: {
        width: 200,
        height: 200,
        type: 'circle'
    },
    boundary: {
        width: 300,
        height: 300
    }
});

Upload

Upload a file to start cropping

Demos