Croppie

Usage


var c = new Croppie(document.getElementById('item'), {
    viewport: {
        width: px,
        height: px,
        type: 'square|circle' //default 'square'
    },
    boundary: {
        width: px,
        height: px
    },
    customClass: '',
    enableZoom: true|false, //default true // previously showZoom
    showZoomer: true|false, //default true
    mouseWheelZoom: true|false, //default true
    update: function (cropper) { }
});
// bind an image to croppie
c.bind({
    src: 'path/to/image',
    points: [x1, y1, x2, y2]
});
// set the zoom programatically. Restricted to the min/max values of the slider
c.setZoom(1.5);
// get crop points from croppie
var data = c.get();
// get result from croppie
// returns Promise
var result = c.result('html|canvas').then(function (img) {
    //img is html positioning & sizing the image correctly if resultType is 'html'
    //img is base64 url of cropped image if resultType is 'canvas' 
});

Or you can use jquery


$('#item').croppie(opts);

$('#item').croppie(method, args);

API

Options

boundaryobject
The outer container of the cropper
- widthpx
- heightpx
customClassstring
A class of your choosing to add to the container to add custom styles to your croppie
enableZoomDefault true(previously showZoom)
Enable zooming functionality. If set to false - scrolling and pinching would not zoom.
showZoomerDefault true
Hide or Show the zoom slider
mouseWheelZoomDefault true
Enable or disable the ability to use the mouse wheel to zoom in and out on a croppie instance
viewportobject
The inner container of the coppie. The visible part of the image
- widthpx
- heightpx
- type'square'|'circle' (default 'square')

Methods

get()returns object
Get the crop points, and the zoom of the image.
bind({ url: 'path/to/image.jpg', points: [x1, y1, x2, y2] })returns Promise
Bind an image the croppie. Returns a promise to be resolved when the image has been loaded and the croppie has been initialized.
result({ type: 'canvas|html', size: 'viewport|originall' })returns Promise
Get the resulting crop of the image.
- type: 'canvas' returns a base64 encoded image string.
- type: 'html' returns html with the positioned correctly and overflow hidden.
- size: 'viewport' returns the cropped image sized the same as the viewport.
- size: 'original' returns the cropped image at the image's original dimensions.
- * size is only applicable on canvas results
setZoom(value)
Set the zoom of a Croppie instance. The value passed in is still restricted to the min/max set by Croppie.
destroy()
Destroy a croppie instance and remove it from the DOM

Events

update(croppe)returns Croppie
when the croppie is dragged around or zoomed, update is fired.

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

Vanilla Example


var vanilla = new Croppie(document.getElementById('vanilla-demo'), {
    viewport: { width: 100, height: 100 },
    boundary: { width: 300, height: 300 },
    showZoomer: false
});
vanilla.bind('demo/demo-2.jpg');
//on button click
vanilla.result('canvas');

Upload Example


$uploadCrop = $('#upload-demo').croppie({
    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')

Usage

API

Options

Methods

Events

Demos

Browser Support

Who