jquery - Using cropper.js before Dropzone.js send image to server -

what want here before dropzone.js send dropped image server, modal appears cropper.js (fengyuanchen script) user can crop image, , when image cropped, send dropzone.js server.

so when change image src of #cropbox function filetobase64 , replace image of cropper function cropper('replace'), keeps showing default.jpg image, instead of new 1 uploaded user

html

<div class="wrapper-crop-box">     <div class="crop-box">         <img src="default.jpg" alt="cropbox" id="cropbox">     </div> </div> 

js:

function filetobase64(file) {   var preview = document.queryselector('.crop-box img');   var reader  = new filereader();    reader.onloadend = function () {     preview.src = reader.result;   }    if (file) {     reader.readasdataurl(file);   } else {     preview.src = "";   } }  $(function() {     dropzone.options.avtdropzone = {         acceptedfiles: 'image/*',         autoprocessqueue: true,         paramname: 'file',         maxfilesize: 2,         maxfiles: 1,         thumbnailwidth: 200,         thumbnailheight: 200,         accept: function(file, done) {             filetobase64(file);              $('#cropbox').cropper('replace', $('#cropbox').attr('src'));             $('.wrapper-crop-box').fadein();             done();         },         init: function() {             this.on("addedfile", function(file) {                 if (this.files[1]!=null){                     this.removefile(this.files[0]);                 }             });         }     };      $('#cropbox').cropper({       aspectratio: 1 / 1,       resizable: false,       guides: false,       dragcrop: false,       autocroparea: 0.4,       checkimageorigin: false,       preview: '.avatar'     }); }); 

you don't need anymore, i'll leave here :)

it bit tricky , solution somehow 'hackish', works , don't have upload files on server resize.

i'm using cropper in modal window. wanted force user crop image dimensions before uploading server.

after confirm crop in modal image instantly uploaded.

// transform cropper datauri output blob dropzone accepts function datauritoblob(datauri) {     var bytestring = atob(datauri.split(',')[1]);     var ab = new arraybuffer(bytestring.length);     var ia = new uint8array(ab);     (var = 0; < 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 thumbnail event mydropzone.on('thumbnail', function (file) {     // ignore files cropped , re-rendered     // prevent infinite loop     if (file.cropped) {         return;     }     if (file.width < 800) {         // validate width prevent small files uploaded         // .. add error message here         return;     }     // cache filename re-assign cropped file     var cachedfilename = file.name;     // remove not cropped file dropzone (we replace later)     mydropzone.removefile(file);      // dynamically create modals allow multiple files processing     var $croppermodal = $(modaltemplate);     // 'crop , upload' button in modal     var $uploadcrop = $croppermodal.find('.crop-upload');      var $img = $('<img />');     // initialize filereader reads uploaded file     var reader = new filereader();     reader.onloadend = function () {         // add uploaded , read image modal         $croppermodal.find('.image-container').html($img);         $img.attr('src', reader.result);          // initialize cropper 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 'crop , upload' button in modal     $uploadcrop.on('click', function() {         // cropped image data         var blob = $img.cropper('getcroppedcanvas').todataurl();         // transform blob object         var newfile = datauritoblob(blob);         // set 'cropped true' (so don't listener again)         newfile.cropped = true;         // assign original filename         newfile.name = cachedfilename;          // add cropped file dropzone         mydropzone.addfile(newfile);         // upload cropped file dropzone         mydropzone.processqueue();         $croppermodal.modal('hide');     }); });