瀏覽器是否始終將圖像文件保存在內存中？

我使用File API在用戶將它們放在頁面上後在畫布上繪製本地圖像文件。它在Firefox 5和Google Chrome中運行良好。問題是，在我放下500 MB圖像文件後，瀏覽器內存消耗增加了約500 Mb。但我認爲它不應該如此，因爲在畫布上繪製圖像後，沒有更多的文件鏈接。示例代碼：瀏覽器是否始終將圖像文件保存在內存中？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <style type="text/css"> 
     html, body { margin: 0; padding: 0; border: 0 none; height: 100%; } 
     #container { width: 100%; min-height: 100%; } 
    </style> 
</head> 
<body> 
    <div id="container"> 
    </div> 
    <script type="text/javascript"> 

     var el = document.getElementById('container'); 
     var files = []; 
     var image = new Image; 
     var URL_ = window.URL || window.webkitURL; 

     image.addEventListener('load', function (e) { 

      // Free link to the file 
      URL_.revokeObjectURL(image.src); 

      // Draw image 
      var canvas = document.createElement('canvas'); 
      canvas.width = 100; 
      canvas.height = 100; 
      canvas.getContext('2d').drawImage(image, 0, 0, 100, 100); 

      el.appendChild(canvas); 

      // Process next 
      generatePreview(); 
     }, false); 

     el.addEventListener('dragenter', function (e) { 
      e.preventDefault(); 
     }, false); 

     el.addEventListener('dragover', function (e) { 
      e.preventDefault(); 
     }, false); 

     el.addEventListener('drop', function (e) { 
      e.preventDefault(); 
      files = Array.prototype.slice.call(e.dataTransfer.files, 0); 

      generatePreview(); 
     }, false); 

     function generatePreview() { 
      if (files.length == 0) return; 
      image.src = URL_.createObjectURL(files.shift()); 
     } 

    </script> 
</body> 
</html>

來源

2011-07-06 Andrey M.

「後，我畫的圖像在畫布上」

我不是一個帆布專家，但如果你的圖像繪製到畫布<元素>，技術上圖像數據仍然是網頁的一部分。

來源

2011-07-06 06:41:17

謝謝！但是，如果我理解正確，畫布上的繪製圖像只需從源圖像中獲取像素並在畫布上繪製。畫布沒有鏈接到源圖像。我不添加圖像對象到DOM中，所以它不應該是頁面的一部分。 –

瀏覽器是否始終將圖像文件保存在內存中？

回答

相關問題