브라우저는 항상 이미지 파일을 메모리에 보관합니까?

파일 API를 사용하여 사용자가 페이지에 이미지를 놓은 후 캔버스에 로컬 이미지 파일을 그립니다. 그것은 파이어 폭스 5와 구글 크롬에서 잘 작동합니다. 문제는 내가 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

감사합니다. 하지만 제가 제대로 이해한다면, 캔버스에 이미지를 그리는 것은 소스 이미지에서 픽셀을 가져 와서 캔버스에 그립니다. Canvas에 원본 이미지에 대한 링크가 없습니다. 그리고 이미지 객체를 DOM에 추가하지 않기 때문에 페이지의 일부가되어서는 안됩니다. –

브라우저는 항상 이미지 파일을 메모리에 보관합니까?

답변

관련 문제