圖像上傳小部件，調整圖像大小然後上傳

Question

我想創建一個圖像上傳小部件，將圖像大小（縮放）爲低分辨率（比如說640x640）。然後我想將這些調整大小的圖像上傳到服務器。主要是爲了防止大文件上傳。

實施它的最佳方法是什麼？我使用JQuery和Django。

Answer 1

雖然您可以通過編寫執行相同操作的Flash和Silverlight墊片來緩解此問題，但瀏覽器對此的支持將受到限制。我已經看到了一些關於如何做到這一點的html5示例。

Plupload是一個很好的管理工具，併爲您提供上面詳細介紹的墊片和上傳器。

http://www.plupload.com/example_all_runtimes.php

，如果你看一下例子嵌入代碼有一個大小調整對象中，你可以定義在您的文章

Answer 2

使用畫布和HTML5說明的參數配置的一部分。

這非常簡單，只需使用FileReader（在iOS/iPhone上無法工作，因爲它們沒有用戶級別的文件）就可以在從輸入類型文件元素返回的文件/文件列表中打開：

function fileSelectHandler(e) { 
    files = e.target.files; 
    var len = files.length; 
    for(var filei = 0; filei < len; filei += 1) { 
     var aFile = files[filei]; 
     var fileReader = new FileReader(); 
     fileReader.onload = (function (theFile) { 
      return function(e) { 
       if(e.target.result != null && e.target.result != undefined) {  
        var imge = new Image(); 
        imge.src = e.target.result; 
        imageDataURLs[theFile.name] = imge; 
        imge.onload = (function() { 
         return function(e) { 
          draggables[0] = new Draggable(g3,imge); 
          draggableFlow.launch(); 
         }; 
        })(); 
       } 
      }; 
     })(aFile); 
     fileReader.readAsDataURL(aFile); 
    } // for next file 
}; 

然後將圖像寫入畫布元素，並使用戶可以將其拖動並裁剪。當他們很高興使用CanvasRenderingContext2D.getImageData從畫布中獲取數據，並將該base64字符串發送到XHR中的服務器時。