上傳前調整圖片的大小

Question

我需要提供一種方法讓用戶以jpeg格式將照片上傳到他們的網站。不過，這些照片在原始尺寸上非常大，我想在上傳前調整大小選項，讓用戶非常輕鬆。看起來我唯一的選擇是客戶端應用程序，它在通過Web服務上傳照片之前調整照片大小，或者調整圖像大小的上載操作的客戶端JavaScript鉤子。第二個選項非常具有臨時性，因爲我沒有JavaScript圖像調整大小庫，並且很難讓JavaScript運行我當前的大小調整工具ImageMagick。

我敢肯定，這不是一個不常見的情況，一些建議或指向這樣做的網站將不勝感激。

Answer 1

您有幾種選擇：

1. 的Java
2. 的ActiveX（僅適用於Windows）
3. Silverlight
4. Flash
5. Flex
6. Google Gears（最新的版本是能夠調整的並從桌面上拖放）

我已經做了大量的研究尋找類似的解決方案，你所描述的，並有很多的解決方案，在質量和靈活性有很大的不同。

我的建議是找到一個解決方案，它將完成您需要的80％，並根據您的需求進行定製。

Answer 2

我認爲你需要Java或ActiveX。例如Thin Image Upload

Answer 3

不幸的是，您將無法使用Javascript調整圖像大小。在Silverlight 2 tho中是可能的。

如果你想購買已經完成的東西：Aurigma Image Uploader是相當令人印象深刻的 - ActiveX和Java版本$ USD250。網站上有一些演示，我很確定Facebook使用相同的控制。

Answer 4

jao和russau說的是真的。原因是由於安全原因，JavaScript無法訪問本地文件系統。如果JavaScript能夠「看到」你的圖像文件，它可以看到任何文件，這是危險的。

您需要一個應用程序級控件才能做到這一點，這意味着Flash，Java或Active-X。

Answer 5

有多種技術的Plupload tool它聲明它可以在上傳前調整大小，但我還沒有嘗試過。我在question about binary image handling javascript libs也找到了合適的答案。

Answer 6

2011年，我們可以通過File API和canvas來了解它。 這隻適用於firefox和chrome。 以下是一個示例：

var file = YOUR_FILE, 
    fileType = file.type, 
    reader = new FileReader(); 

reader.onloadend = function() { 
    var image = new Image(); 
     image.src = reader.result; 

    image.onload = function() { 
    var maxWidth = 960, 
     maxHeight = 960, 
     imageWidth = image.width, 
     imageHeight = image.height; 

    if (imageWidth > imageHeight) { 
     if (imageWidth > maxWidth) { 
     imageHeight *= maxWidth/imageWidth; 
     imageWidth = maxWidth; 
     } 
    } 
    else { 
     if (imageHeight > maxHeight) { 
     imageWidth *= maxHeight/imageHeight; 
     imageHeight = maxHeight; 
     } 
    } 

    var canvas = document.createElement('canvas'); 
    canvas.width = imageWidth; 
    canvas.height = imageHeight; 

    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(this, 0, 0, imageWidth, imageHeight); 

    // The resized file ready for upload 
    var finalFile = canvas.toDataURL(fileType); 
    } 
} 

reader.readAsDataURL(file); 

Answer 7

純JavaScript解決方案。我的代碼通過雙線性插值調整JPEG大小，並且不會丟失exif。

https://github.com/hMatoba/JavaScript-MinifyJpegAsync

function post(data) { 
    var req = new XMLHttpRequest(); 
    req.open("POST", "/jpeg", false); 
    req.setRequestHeader('Content-Type', 'image/jpeg'); 
    req.send(data.buffer); 
} 

function handleFileSelect(evt) { 
    var files = evt.target.files; 

    for (var i = 0, f; f = files[i]; i++){ 
     var reader = new FileReader(); 
     reader.onloadend = function(e){ 
      MinifyJpegAsync.minify(e.target.result, 1280, post); 
     }; 
     reader.readAsDataURL(f); 
    } 
} 

document.getElementById('files').addEventListener('change', handleFileSelect, false);