dropzone-cropper.js

// transform cropper dataURI output to a Blob which Dropzone accepts
function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: 'image/jpeg' });
}

// modal window template
var modalTemplate = '<div class="modal"><!-- bootstrap modal here --></div>';

// initialize dropzone
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(
    "#my-dropzone-container",
    {
        autoProcessQueue: false,
        // ..your other parameters..
    }
);

// listen to thumbnail event
myDropzone.on('thumbnail', function (file) {
    // ignore files which were already cropped and re-rendered
    // to prevent infinite loop
    if (file.cropped) {
        return;
    }
    if (file.width < 800) {
        // validate width to prevent too small files to be uploaded
        // .. add some error message here
        return;
    }
    // cache filename to re-assign it to cropped file
    var cachedFilename = file.name;
    // remove not cropped file from dropzone (we will replace it later)
    myDropzone.removeFile(file);

    // dynamically create modals to allow multiple files processing
    var $cropperModal = $(modalTemplate);
    // 'Crop and Upload' button in a modal
    var $uploadCrop = $cropperModal.find('.crop-upload');

    var $img = $('<img />');
    // initialize FileReader which reads uploaded file
    var reader = new FileReader();
    reader.onloadend = function () {
        // add uploaded and read image to modal
        $cropperModal.find('.image-container').html($img);
        $img.attr('src', reader.result);

        // initialize cropper for uploaded image
        $img.cropper({
            aspectRatio: 16 / 9,
            autoCropArea: 1,
            movable: false,
            cropBoxResizable: true,
            minContainerWidth: 850
        });
    };
    // read uploaded file (triggers code above)
    reader.readAsDataURL(file);

    $cropperModal.modal('show');

    // listener for 'Crop and Upload' button in modal
    $uploadCrop.on('click', function() {
        // get cropped image data
        var blob = $img.cropper('getCroppedCanvas').toDataURL();
        // transform it to Blob object
        var newFile = dataURItoBlob(blob);
        // set 'cropped to true' (so that we don't get to that listener again)
        newFile.cropped = true;
        // assign original filename
        newFile.name = cachedFilename;

        // add cropped file to dropzone
        myDropzone.addFile(newFile);
        // upload cropped file with dropzone
        myDropzone.processQueue();
        $cropperModal.modal('hide');
    });
});

@danilosantosdev you can solve it by changing line (72) var blob = $img.cropper('getCroppedCanvas').toDataURL(); to var blob = $img.cropper('getCroppedCanvas').toDataURL("image/jpeg"); because the default is probably a PNG, which increases the size of that blob.

@schimini, thanks, this helped!

For those getting high Image size, just set .toDataURL("image/jpeg","0.9") to a more reasonable file size.

Hey there im getting a error in the $img.cropper part, saying that $img.cropper is not a a function.

Any ideas? what version of cropper did you guys use?

Figured my whole problem was that I wasn't using the right script. I had to use jquery-cropper to get it working.

https://github.com/fengyuanchen/jquery-cropper

good work.

Helped me a lot

Hello ,i have use this code everything is working fine but modal popup is not working how i can crop image please suggest .

Thanks.

@maria-p

It seem to be working very well with single image. Did you try with multiple images ?

Here's an example with the modal HTML for anyone needing it. Some of the script has been changed since this is from a project of mine the modal should work fine with the code above, just the selector might need to change

https://gist.github.com/BrettGregson/a4f8fc422556a447e50f3da33f3d175e

This link is broken.. Can you please provide the working link?