2
我是JS新手,最近幾天我被困在客戶端壓縮圖像。我想要做的是,用戶在dropzone上拖放一堆圖片(可以超過10個),他們應該使用JIC進行壓縮,並且一旦用戶單擊某個按鈕上傳所有壓縮文件,即可上傳到服務器。通過調整壓縮圖像dropzone.js
到目前爲止,只有當一張圖像被丟棄時,我的代碼才能夠進行壓縮和上傳,但是當我丟棄多張圖像時,所有圖像都保持未壓縮狀態,但是隻有一張。我不知道我在做什麼錯。我試圖遵循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。你的幫助將非常感激。謝謝。