-
-
Save maria-p/8633b51f629ea8dbd27e to your computer and use it in GitHub Desktop.
| // 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'); | |
| }); | |
| }); |
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.
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.
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?
For those getting high Image size, just set
.toDataURL("image/jpeg","0.9")to a more reasonable file size.