通过调整压缩图像dropzone.js

Question

我是JS新手，最近几天我被困在客户端压缩图像。我想要做的是，用户在dropzone上拖放一堆图片（可以超过10个），他们应该使用JIC进行压缩，并且一旦用户单击某个按钮上传所有压缩文件，即可上传到服务器。

到目前为止，只有当一张图像被丢弃时，我的代码才能够进行压缩和上传，但是当我丢弃多张图像时，所有图像都保持未压缩状态，但是只有一张。我不知道我在做什么错。我试图遵循this post的解决方案，但无法实现我的目标。我使用的代码如下：

Dropzone.autoDiscover=false; 
var myDropZone=new Dropzone("#dropzonePreview",{ 
     url:"/dragdrop", 
     autoProcessQueue:false, 
     acceptedFiles: 'image/*', 
     parallelUploads: 10, 

     init:function(){ 
     this.on('addedfile', function(file){ 

      _this = this; 
      ////console.log("Added File"); 
      $('#userphoto').css('color', "transparent"); 
      EXIF.getData(file, function(){ // async call 
       var lat=EXIF.getTag(this,"GPSLatitude"); 
       var lon=EXIF.getTag(this,"GPSLongitude"); 
       geocoder.geocode({ 'latLng': temp }, function(results, status) { // another async call }); 
       } 
      }); 

      myReader2 = new FileReader(); // Reading image for compression purpose 
      myReader2.onload = function(event) { 
       console.log(file.status); 
       // var i = new Image(); 

       var i = document.getElementById("source_image"); 
       i.src = event.target.result; 

       i.onload = function() { 
        var source_image = document.getElementById('source_image'); 

        var quality = 70; 

        comp = jic.compress(source_image, 70, "jpg"); // Link to function can be found at the end of code. 

        var editedFile = base64ToFile(comp.src, file); // same function used in mentioned stackoverflow post. 

        // Replace original with resized 

        var origFileIndex = myDropZone.files.indexOf(file); 
        myDropZone.files[origFileIndex] = editedFile; 

        editedFile.status = Dropzone.ADDED; 
        myDropZone.enqueueFile(editedFile); 

        delete source_image; 
       }; 
      }; 
      myReader2.readAsDataURL(file); 
     }); 

     this.on("sending",function(file,xhr,formData){ 
      //appending some data to formData 
     }); 

     this.on("complete", function(file){ 
      // processing like removing objects of file from drop zone 
     }); 
     } 
    }); 

$('#upload').click(function(evt){ // Button that triggers uploading file 
     myDropZone.processQueue(); 
} 

链接function。你的帮助将非常感激。谢谢。

Answer 1

我发现此问题的解决方案。这对我有用。

请检查

function base64ToFile(dataURI, origFile) { 
    var byteString, mimestring; 

    if(dataURI.split(',')[0].indexOf('base64') !== -1) { 
    byteString = atob(dataURI.split(',')[1]); 
    } else { 
    byteString = decodeURI(dataURI.split(',')[1]); 
    } 

    mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0]; 

    var content = new Array(); 
    for (var i = 0; i < byteString.length; i++) { 
    content[i] = byteString.charCodeAt(i); 
    } 

    var newFile = new File(
    [new Uint8Array(content)], origFile.name, {type: mimestring} 
); 


    // Copy props set by the dropzone in the original file 

    var origProps = [ 
    "upload", "status", "previewElement", "previewTemplate", "accepted" 
    ]; 

    $.each(origProps, function(i, p) { 
    newFile[p] = origFile[p]; 
    }); 

    return newFile; 
} 
Dropzone.autoDiscover = false; 
jQuery(document).ready(function($) { 

var myDropZone=new Dropzone("#dropzonePreview",{ 
    url:"/dragdrop", 
    autoProcessQueue:false, 
    acceptedFiles: 'image/*', 
    parallelUploads: 10, 

     init:function(){ 

     this.on("sending",function(file,xhr,formData){ 

     }); 
     this.on("complete", function(file){ 

     }); 
     } 

    }); 
myDropZone.on("addedfile", function(file) { 

     var reader = new FileReader(); 

     reader.addEventListener("load", function(event) { 

      var origImg = new Image(); 
      origImg.src = event.target.result; 

      origImg.addEventListener("load", function(event) { 
      comp = jic.compress(origImg, 30, "jpg"); 
      var resizedFile = base64ToFile(comp.src, file); 
      var origFileIndex = myDropZone.files.indexOf(file); 
      myDropZone.files[origFileIndex] = resizedFile; 
      myDropZone.enqueueFile(resizedFile); 
      }); 
     }); 
     reader.readAsDataURL(file); 
     }); 
$('#upload').click(function(e){ // Button that triggers uploading file 
    e.preventDefault(); 
    myDropZone.processQueue(); 
}); 

});