如何在客戶端上調整圖片大小，但不工作

Question

好的，我在這一個白色的結尾。我正嘗試使用Javascript調整客戶端上傳的圖片大小。

我使用，

<script>      
function uploadFiles() { 
    if (window.File && window.FileReader && window.FileList && window.Blob) { 
     if (!document.getElementById('confirm').checked) { 
      alert('You must click "confirm".'); 
      return false; 
     } 
     alert('begin'); 
     var files = document.getElementById('file').files; 
     for(var i = 0; i < files.length; i++) { 
      alert('start'); 
      resizeAndUpload(files[i]); 
     } 
     return false; 
    } else { 
     alert('The File APIs are not fully supported in this browser.'); 
     return false; 
    } 
} 

function resizeAndUpload(file) { 
    var reader = new FileReader(); 
    reader.onloadend = function() { 

    var tempImg = new Image(); 
    tempImg.src = reader.result; 
    tempImg.onload = function() { 

     var MAX_WIDTH = 300; 
     var MAX_HEIGHT = 300; 
     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(this, 0, 0, tempW, tempH); 

     var fd = new FormData(); 
     fd.append("upload-avatar", "Upload"); 
     var confirm = 'off'; 
     if (document.getElementById('confirm').checked) { 
      confirm = 'on'; 
     } 
     fd.append("confirm", confirm); 
     fd.append("file", canvas.mozGetAsFile("image.jpg")); 
     fd.append("license", document.getElementById('license').value); 
     fd.append("name", document.getElementById('name').value); 
     var share = 'off'; 
     if (document.getElementById('share').checked) { 
      share = 'on'; 
     } 
     fd.append("share", share); 
     var xhr = new XMLHttpRequest(); 
     xhr.open("POST", "MyUploadServlet"); 
     xhr.send(fd); 
     alert('done'); 
     } 

    } 
    reader.readAsDataURL(file); 
} 
</script> 

然後在我的HTML我有，

<form onsubmit="return uploadFiles()" method="post" enctype="multipart/form-data"> 
    <input id="file" type="file" name="file" multiple/><br/> 
    <input id="confirm" type="checkbox" name="confirm">confirm</input><br/> 
    ... 
    <input name="upload-resize" value="Upload and resize" type="submit"/><br/> 
</form> 

這實際工作，排序的，但網頁不刷新，這是我想做的事情顯示上傳的圖像。如果我從我認爲會導致重新加載的函數返回true，那麼它不起作用，它似乎永遠不會調用該帖子並掛起。 我也試過location.reload（）但類似的問題。

好吧，我想我有這個代碼的一些問題：

1 - 如何重新加載頁面？

- >答案似乎可以稱之爲 「history.go（0）;」，這似乎工作，

2 - 火狐，Chrome瀏覽器不，IE或Safari 這僅適用於我假設，因爲的使用「canvas.mozGetAsFile（」image.jpg「）」， 任何想法如何讓它在Chrome上工作？

- >使用toBlob似乎工作，但似乎與頁面重載突破，在Firefox而不是其他作品（不，我還沒有嘗試過填充工具）

3 - 理想我想有兩個按鈕，一個做調整大小，一個做正常形式提交，不知道該怎麼做。目前我有兩個完整的表單副本，一個用於調整大小，另一個用於正常文件提交。

4 - 圖像以PNG格式上傳，如何壓縮爲JPEG或壓縮，即使調整大小，一些圖像顯示比他們更大的鬆散壓縮。

- >使用toBlob似乎給您JPG，但似乎與頁面重載突破，在Firefox而不是其他作品（不，我還沒有嘗試過填充工具）

對不起，多部分的問題，但我認爲任何人想要這樣做都需要所有的答案。

Answer 1

Q2 使用canvas.toBlob代替canvas.mozGetAsFile。 There is a polyfill to increase browser compatibility.

在他們的頁面上使用的顯示

var canvas = document.createElement('canvas'); 
canvas.toBlob(
    function (blob) { 
     // the blob is the jpeg file 
     var formData = new FormData(); 
     formData.append('file', blob, fileName); 
     /* ... */ 
    }, 
    'image/jpeg' 
); 

Q4 指定canvas.toBlob(callback, 'image/jpeg', quality)其中質量是從0.0到1.0（最高質量）

Q3 你可以在多個按鈕形成。

<form> 
    <input id="file" type="file" name="file" multiple/><br/> 
    <input id="confirm" type="checkbox" name="confirm">confirm</input><br/> 
    ... 
    <input name="upload" value="Upload" type="button"/> 
    <input name="upload-resize" value="Upload and resize" type="button"/> 
</form> 

請注意，表單標記不包含onsubmit屬性，而輸入類型現在是按鈕而不是提交。

<input name="upload" value="Upload" type="button" onclick="myfunction()"/> 

或代替onclick屬性，你可以使用的addEventListener等

Q1 你shoudn't回去的歷史。您的location.reload（）是正確的，但必須在發送/上傳完成後完成。

xhr.onreadystatechange = function() { 
if (xhr.readyState != 4) { return; } 
    location.reload(); 
} 

XMLHttpRequest是異步的，所以發送方法在上傳完成之前就會返回！要知道發送是否完成，請使用onreadystatechange，如上所示。

注意：您可能也想檢查響應狀態碼。