Używanie pliku cropper.js przed zrzutem pliku Dropzone.js do serwera

Question

Co chcę tutaj zrobić, to zanim Dropzone.js wyśle ​​upuszczony obraz na serwer, pojawi się modal z plikiem cropper.js (skrypt fengyuanchen), aby użytkownik mógł przyciąć obraz, a gdy obraz zostanie przycięty, wyślij go za pomocą Dropzone.js na serwer.

Kiedy więc zmienię obraz src z #cropbox za pomocą funkcji fileToBase64 i zamienię obraz croppera na funkcję cropper ("zamień"), wyświetla on obraz default.jpg, zamiast nowego przesłanego z użytkowników

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

prawdopodobnie nie trzeba go już, ale ja po prostu zostawić go tutaj :)

To było trochę trudne, a moje rozwiązanie jest prawdopodobnie jakoś "hackowe", ale działa i nie trzeba przesyłać plików na serwer, aby zmienić rozmiar.

Używam również croppera w oknie modalnym. Chciałem zmusić użytkownika do przycięcia obrazu do pewnych wymiarów przed przesłaniem na serwer.

Po potwierdzeniu przycięcia w modalnym obrazie jest natychmiast przesyłane.

// 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

Zrobiłem to za pomocą dropzone.js i cropper.js wewnątrz modułu angular.js. może to może komuś pomóc.

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

Answer 3

Oto istota, która zapewnia tę funkcjonalność.

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

Uwaga, nie jestem autorem.