Croppie

Croppie is a fast, easy to use image cropping plugin with tons of configuration options!

View on Github

Usage


var c = new Croppie(document.getElementById('item'), {
    viewport: {
        width: px,
        height: px,
        type: 'square|circle' //default 'square'
    },
    boundary: {
        width: px,
        height: px
    },
    customClass: '',
    showZoom: 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]
});
// 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

  • mouseWheelZoomDefault true

    Enable or disable the ability to use the mouse wheel to zoom in and out on a croppie instance

  • showZoomDefault true

    Hide or Show the zoom slider

  • 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(resultType)returns Promise

    Get the resulting crop of the image. resultType can be 'canvas' or 'html'. 'canvas' returns a base64 image. 'html' returns html of a image cropped by positioning within a div.

Events

  • update(croppe)returns Croppie

    when the croppie is dragged around or zoomed, update is fired.

Demos

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

var vanilla = new Croppie(document.getElementById('vanilla-demo'), {
    viewport: { width: 100, height: 100 },
    boundary: { width: 300, height: 300 }
});
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 a file to start cropping

Who?

Croppie was built by Foliotek for use in Foliotek Presentation.

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