使用atob（）

Question

將畫布的文件大小返回到dataUrl（）我試圖從URL加載圖像到畫布中，然後獲取dataUrl並使用它來找出圖像的大小。

結果是圖像顯示比它應該大得多。

例如，在60kb圖像中加載導致解碼變量返回到134kb。

當我在我的電腦本地存儲的圖像上運行相同的代碼，而不是從文件輸入中獲取文件對象，並返回值是正確的（例如60kb）。

這是我使用的代碼：

  var canvas = document.getElementById('canvas'); 
      var ctx = canvas.getContext('2d'); 
      var img = '/anImage.jpg'; 
      var image = document.createElement('img'); 

      image.src = img; 

      ctx.drawImage(image, 500, 500); 

      ctx.drawImage(image, img.width, img.height); 

      var dataUrl = canvas.toDataURL('image/jpeg'); 

      var d = dataUrl.substr(dataUrl.indexOf('base64,') + 7); 
      var decoded = atob(d); 

      var size = decoded.length; 

我再次像使用dataUrl輸出和保存它...嘗試它仍然會導致圖像中是134KB，而不是原來的大小60Kb。

據我所知，base64編碼使得圖像的大小是1.37倍，但從文件輸入中獲取圖像對象時，該值是正確的。

我不確定壓縮級別是否正在丟失？或者我是否可以以某種方式從文件對象中獲取此信息，然後使用它來設置toDataUrl（）函數的第二個參數？

我找不到具體涉及到這個網上，這樣的任何信息，將不勝感激:)

Answer 1

以字節爲單位獲取圖像的大小，你可以做簡單的HEAD要求它託管在哪裏圖像的任何信息。

例如：

var xhr = new XMLHttpRequest(); 
xhr.open('HEAD', '/anImage.jpg', true); 
xhr.onreadystatechange = function(){ 
    if (xhr.readyState == 4) { 
     if (xhr.status == 200) { 
      console.log('size: ' + xhr.getResponseHeader('Content-Length')); 
     } 
    } 
}; 
xhr.send(null);