dropzone.js를 조정하여 이미지 압축

Question

저는 JS에 처음입니다. 지난 며칠 동안 클라이언트 측에서 이미지를 압축하는 데 어려움을 겪고 있습니다. 내가 원하는 것은, 사용자가 드롭 존에서 이미지의 묶음을 떨어 뜨리는 것입니다.이 이미지는 JIC을 사용하여 압축해야하며 사용자가 버튼을 클릭하여 압축 된 모든 파일을 업로드하면 서버에 업로드됩니다.

지금까지 내 코드는 하나의 이미지가 삭제 된 경우에만 압축하고 업로드 할 수 있지만 여러 이미지를 놓으면 모든 이미지가 압축되지 않고 하나가 남습니다. 내가 뭘 잘못하고 있는지 모르겠다. 나는 this post에서 해결책을 따라 가려고했지만 내 목표를 달성하지 못했습니다. 다음과 같이 내가 사용하고 코드는 다음과 같습니다 function에

이

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

연결합니다. 귀하의 도움은 정말 감사하겠습니다. 고맙습니다.

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

});