使用uploadifive在客戶端調整圖像大小

Question

我已經使用uploadifive實現了圖像上傳頁面。有沒有辦法在客戶端重新調整圖像大小，而不是在服務器端執行？如果圖像可以在客戶端重新調整大小，則會縮短上載圖像的時間。

任何人都可以舉個例子來做到這一點。

Answer 1

最後我實現了圖像大小調整功能，幷包含在uploadifive js中。

我修改$ data.uploadFile方法（無線363）

$data.uploadFile = function(file, uploadAll) { 
    if (!file.skip && !file.complete && !file.uploading) { 
     file.uploading = true; 
     $data.uploads.current++; 
     $data.uploads.attempted++; 

     // Create a new AJAX request 
     xhr = file.xhr = new XMLHttpRequest(); 

     // Start the upload 
     // Use the faster FormData if it exists 
     if (typeof FormData === 'function' || typeof FormData === 'object') { 
      // Resizing starts 
      var readerResize = new FileReader(); 
      readerResize.onload = function() { 
       // Create a new FormData object 
       var formData = new FormData(); 

       var dataURL = methods.getResizedDataULR(readerResize, file.type); 

       // Convert resize dataURL into a blob again 
       var blob = methods.dataURItoBlob(dataURL); 

       // Append resized blob into form data with file name 
       formData.append(settings.fileObjName, blob, file.name); 

       // Add the rest of the formData 
       for (i in settings.formData) { 
        formData.append(i, settings.formData[i]); 
       } 

       // Open the AJAX call 
       xhr.open(settings.method, settings.uploadScript, true); 

       // On progress function 
       xhr.upload.addEventListener('progress', function(e) { 
        if (e.lengthComputable) { 
         $data.progress(e, file); 
        } 
       }, false); 

       // On complete function 
       xhr.addEventListener('load', function(e) { 
        if (this.readyState == 4) { 
         file.uploading = false; 
         if (this.status == 200) { 
          if (file.xhr.responseText !== 'Invalid file type.') { 
           $data.uploadComplete(e, file, uploadAll); 
          } else { 
           $data.error(file.xhr.responseText, file, uploadAll); 
          } 
         } else if (this.status == 404) { 
          $data.error('404_FILE_NOT_FOUND', file, uploadAll); 
         } else if (this.status == 403) { 
          $data.error('403_FORBIDDEN', file, uploadAll); 
         } else { 
          $data.error('Unknown Error', file, uploadAll); 
         } 
        } 
       }); 

       // Send the form data (multipart/form-data) 
       xhr.send(formData); 
      }; 

      readerResize.readAsDataURL(file); 

      // Resizing ends 
     } else { 

      // Send as binary 
      // Don't change this else block 

     } 
    } 
} 

，並加入輔助方法如下

var methods = { 
    ..... 
    // appended below new methods for resizing purpose 

    dataURItoBlob: function (dataURI) { 
     var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; 
     var binary = atob(dataURI.split(',')[1]), array = []; 
     for (var i = 0; i < binary.length; i++) array.push(binary.charCodeAt(i)); 
     return new Blob([new Uint8Array(array)], { type: mimeString }); 
    }, 

    getResizedDataULR: function (reader, fileType) { 
     var tempImg = new Image(); 
     tempImg.src = reader.result; 

     var MAX_WIDTH = 800; 
     var MAX_HEIGHT = 600; 
     var tempW = tempImg.width; 
     var tempH = tempImg.height; 
     if (tempW > tempH) { 
      if (tempW > MAX_WIDTH) { 
       tempH *= MAX_WIDTH/tempW; 
       tempW = MAX_WIDTH; 
      } 
     } else { 
      if (tempH > MAX_HEIGHT) { 
       tempW *= MAX_HEIGHT/tempH; 
       tempH = MAX_HEIGHT; 
      } 
     } 

     var canvas = document.createElement('canvas'); 
     canvas.width = tempW; 
     canvas.height = tempH; 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(tempImg, 0, 0, tempW, tempH); 
     return canvas.toDataURL(fileType); 
    } 
}