使用cropper.js發送圖像到服務器

Question

我想在這裏做的是前Dropzone.js丟棄的圖像發送到服務器，一個模式出現帶有cropper.js（fengyuanchen腳本），使用戶可以裁剪圖像和圖像被裁剪時，將其與Dropzone.js一起發送到服務器。

因此，當我用函數fileToBase64更改#cropbox的圖像src並用函數裁剪器（'replace'）替換裁剪器的圖像時，它會一直顯示default.jpg圖像，而不是從上傳的新圖像用戶

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

你可能不需要它了，但我就離開這裏:)

這是一個有點棘手，我的解決方案可能是莫名其妙「的hackish」，但它的作品，你不必上傳服務器上的調整大小的文件。

我還使用在一個模式窗口栽跟頭。我想強制用戶在上傳到服務器之前將圖像裁剪到某個尺寸。

後您確認一個模態圖像作物即時上傳。

// 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模塊中使用dropzone.js和cropper.js完成了它。也許它可以幫助某人。

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

Answer 3

這是提供此功能的要點。

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

注意，我不是作家。