Dropzone.js sunucusundan görüntü göndermeden önce cropper.js'yi kullanma

Question

Burada yapmak istediğim şey, Dropzone.js sunucusuna bırakılan görüntünün gönderilmesinden önce, kullanıcı tarafından kırpılabilmesi için cropper.js (fengyuanchen komut dosyası) ile bir modal görüntülenir. görüntü ve görüntü kırpıldığında, Dropzone.js ile sunucuya gönderin. i fonksiyon fileToBase64 ile #cropbox görüntü src değiştirmek ve işlev ekin ('yerine') ile ekin ve görüntü değiştirdiğinizde

Yani, yerine yüklenen yenisinin, default.jpg görüntüyü görüntülemeye devam eder kullanıcı

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' 
    }); 
}); 

Answer 1

muhtemelen artık buna ihtiyacı yoktur, ama onu burada bırakacağım :)

Bu biraz zor ve benim çözümüm muhtemelen bir şekilde 'hack', ama çalışıyor ve yeniden boyutlandırmak için sunucuya dosya yüklemek zorunda değilsiniz.

Ayrıca modal bir pencerede cropper kullanıyorum. Kullanıcıyı sunucuya yüklemeden önce resmi belirli bir boyuta kırpmaya zorlamak istedim.

Makro görüntüsündeki kırpmayı onayladıktan sonra anında yüklenir.

// 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'); 
    }); 
}); 

Answer 2

Angular.js modülünde dropzone.js ve cropper.js'yi kullanarak yaptım. belki birilerine yardım edebilir.

[http://pastebin.com/4miiWbyZ][1] - angularjs 
[http://pastebin.com/1kBkvWt8][2] - dropzone.html 
[http://pastebin.com/jmDdNWFf][3] - cropper.html 

Answer 3

İşte bu işlevi sağlayan bir özniteliktir.

https://gist.github.com/maria-p/8633b51f629ea8dbd27e

// 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'); 
    }); 
}); 

Not, ben yazar değilim.