Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// 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');
});
});
@maria-p
Copy link
Author

maria-p commented Aug 11, 2015

image
image

@falazad
Copy link

falazad commented Sep 17, 2015

can you also post the code for the bootstrap modal im kinda new to modals

@stepanmas
Copy link

stepanmas commented Apr 16, 2016

Thanks for solution!

@yabdab
Copy link

yabdab commented Jun 13, 2016

Any way to drag in multiple files with this? Seems like only first image works?

@tozyne
Copy link

tozyne commented Jul 21, 2016

Hi, a very awesome documentation, but i believe th emodal section is missing, so how do get the code in, cos i have no idea hat its like

@tozyne
Copy link

tozyne commented Jul 21, 2016

Oh never mind i finally got to the bottom of it....thanks for this

@rodrigoazs
Copy link

rodrigoazs commented Aug 2, 2016

Any html example working?

@slavic18
Copy link

slavic18 commented Sep 1, 2016

Cool thank u!!!

@Luddinus
Copy link

Luddinus commented Sep 24, 2016

+1 for demo

@v0ff4k
Copy link

v0ff4k commented Jan 6, 2017

working demo, not cropperjs, but worked: slimimagecropper.com

@ragsnas
Copy link

ragsnas commented Feb 17, 2017

@tozyne could you post your modal or explain what to do?

@ibsenjg
Copy link

ibsenjg commented Mar 4, 2017

Hi! somebody can help me to use this code? my modal dont show the cropper, not even the selected image .. please help!

@BrettGregson
Copy link

BrettGregson commented Mar 6, 2017

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

@ibsenjg
Copy link

ibsenjg commented Mar 8, 2017

@BrettGregson Thank you! ill try with your changes too

@4unkur
Copy link

4unkur commented Mar 24, 2017

Thanks, helped a lot.
Full example:
https://github.com/4unkur/cropper_dropzone

@Saymecode
Copy link

Saymecode commented Jun 7, 2017

File became too big (from3.4mb to 18mb)

@danilosantosdev
Copy link

danilosantosdev commented Aug 3, 2017

@Saymecode, i have the same problem. I'm uploading a file with 107.5 kB and 1368 x 1026px and the content of the request is being sended with 1205213 kb (1.2mb).

Because of that my server is throwing an error called "Request Entity Too Long" (http 413).

Someone knows how can i fix it?

@schimini
Copy link

schimini commented Apr 16, 2018

@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.

@o15a3d4l11s2
Copy link

o15a3d4l11s2 commented Apr 24, 2018

@schimini, thanks, this helped!

@luco
Copy link

luco commented Apr 24, 2018

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

@Efrain177
Copy link

Efrain177 commented Sep 13, 2018

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?

@Efrain177
Copy link

Efrain177 commented Sep 13, 2018

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

@neelbhanushali
Copy link

neelbhanushali commented Oct 4, 2018

good work.

Helped me a lot

@subodhrawat3344
Copy link

subodhrawat3344 commented May 4, 2019

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

Thanks.

@andynguyenm
Copy link

andynguyenm commented Sep 5, 2019

@maria-p

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

@cmdr-rohit-bang
Copy link

cmdr-rohit-bang commented May 11, 2020

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment