Crop Plugin

• Basic Usage
• Bootstrap Modal
• Options

Notice: Include assets/js/plugins/crop.js before using the crop plugin.

Basic Usage

HTML Setup:

<!-- The crop container -->
<div id="crop-container" style="display: none;">
    <div class="crop-preview"></div>
    <button type="button" class="cancel">Cancel</button>
    <button type="button" class="save">Save</button>
</div>

JavaScript:

// Filepicker plugin
var FP = $('#filepicker').filePicker({...});

// Crop plugin call
FilepickerCrop(FP, {
    container: $('#crop-container'),
    // more options ... 
});

Bootstrap Modal

Requires Bootstrap.

HTML Setup:

<div class="modal fade" id="crop-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Crop image</h4>
            </div>
            <div class="modal-body">
                <div class="crop-preview"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary save" data-loading-text="Saving...">Save</button>
            </div>
        </div>
    </div>
</div>

JavaScript:

// Filepicker plugin
var FP = $('#filepicker').filePicker({...});

// Crop plugin call
FilepickerCrop(FP, {
    container: $('#crop-modal'),
    modal: true, // Optional, because it auto detects Bootstrap modal support.
    // more options ... 
});

Options

aspectRatio

Aspect ratio of width/height.

• Type: decimal
• Default: n/a
• Example: 1 (for square)

minSize

Minimum width/height, use 0 for unbounded dimension.

• Type: array [w, h]
• Default: n/a
• Example: [150, 250]

maxSize

Maximum width/height, use 0 for unbounded dimension.

• Type: array [w, h]
• Default: n/a
• Example: [150, 250]

setSelect

Set an initial selection area.

• Type: array [x, y, x2, y2]
• Default: n/a

container

The jQuery object for the crop container or Bootstrap modal.

• Type: jQuery Object
• Default: n/a
• Example: $('#crop-container') / $('#crop-modal')

modal

Whether to enable Bootstrap modal. Optional, because it auto detects Bootstrap modal support.

• Type: boolean
• Default: false / true when using Bootstrap modal

preview

The jQuery object for the element where the image preview will be rendered.

• Type: jQuery Object
• Default: container.find('.crop-preview')
• Example: $('.crop-preview')

cropBtn

The Query object for the button that will open the crop. When using the uploader with filesList it will look into the download template for a .crop button.

If Filepicker is used without a the filesList, this jQuery object must have the data-file attribute set with the file object. Edit basic.html to see how you can attach a file object to the button.

• Type: jQuery Object
• Default: filesList.find('.crop')
• Example: $('.crop-btn')

saveBtn

The jQuery object for the button that will save the cropped image.

• Type: jQuery Object
• Default: container.find('.save')
• Example: $('.save-crop-btn')

cancelBtn

The jQuery object for the button that will cancel the crop.

• Type: jQuery Object
• Default: container.find('.cancel')
• Example: $('.cancel-crop-btn')