Demos

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
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
Hidden Example

When binding a croppie element that isn't visible, i.e., in a modal - you'll need to call bind again on your croppie element, to indicate to croppie that the position has changed and it needs to recalculate its points.


$('#hidden-demo').croppie('bind')

Browser Support

Croppie is supported in the following browsers:

IE9 may be supported, but it isn't tested. If you're able to test it and let us know, please do so on Github.

Who

Croppie was built by Foliotek for use in Foliotek Presentation.

Please submit any issues or questions on Github.

Check out some of our other open source tools: AjaxQ | LTI Tester