畫布甚至Img吃RAM和CPU

我正在採取在該地區下降的文件列表。然後獲取他們的dataUrl並將它們放入Img中。然後使用drawImage將該圖像放在畫布上。我根據它們的大小適當縮放圖像。它的功能正常。但問題在於操作完成後。例如在Canvas被附加到dom CPU並且內存使用率變高之後很久。只是爲了顯示畫布，它需要高CPU和內存。畫布甚至Img吃RAM和CPU

代碼降事件中：

e.preventDefault(); 
    $("#controller_search").attr('value', '^') 
    $("#controller_search").attr('disabled', 'disabled'); 
    $("#imageList").html(''); 
    var templateData = "\ 
     <div class='imageviewer-up'> \ 
      <div class='curtain'></div> \ 
      <canvas class='canvas'></canvas> \ 
      <div class='loading'>0%</div> \ 
     </div> \ 
     "; 
    for(var i=0;i<event.dataTransfer.files.length;++i){ 
     var file = event.dataTransfer.files[i]; 
     var reader = new FileReader(); 
     reader.onload = (function(file){ 
      return function(e){ 
       var template = $(templateData); 
       var image = new Image();/*template.find('img')[0];*/ 
       image.onload = (function(image){ 
        return function(){ 
         var size = {height: image.height, width: image.width} 
         var rSize = size; 
         if(size.height > 175) 
          rSize = {height: 175, width: (175*size.width)/size.height} 
         else{ 
          rSize = {height: 175/(size.width/size.height), width: size.width/(size.width/size.height)} 
         } 
         image.height = rSize.height; 
         image.width = rSize.width; 

         var canvas = template.find('canvas')[0]; 
         var context = canvas.getContext("2d"); 
         context.mozImageSmoothingEnabled = true; 
         canvas.height = 175+4; 
         canvas.width = image.width+4; 
         context.drawImage(image, (canvas.height-image.height)/2, 2, image.width, image.height); 

         template.css('height', 175+4+0); 
         template.css('width', image.width+0); 

        } 
       })(image) 
       image.src = e.target.result; 
       image.title = file.name; 
       console.log(file.name); 
       $("#imageList").append(template); 
       image = null; 
      } 

     })(file); 
     reader.readAsDataURL(file); 
    }

目前我通過拖動20幅圖像（總計爲45 MB），所以20個帆布被創建測試。這太多了嗎？

編輯

我用，而不是帆布IMG甚至測試。例如僅使用IMG和dataUrls。但也是這樣。以同樣的方式放慢速度。那麼我的代碼中是否有內存泄漏？

來源

2011-11-20 Neel Basu

我認爲這是一個關於鉻bug#36412的問題data: url正在佔用內存但沒有釋放它。這就是潛在的問題。我使用window.URL.createObjectURL和window.URL.revokeObjectURL對其進行了修復。對於webkit而言，它代替了window.webkitURL。現在它的工作正常，甚至有30多個圖像。目前的代碼如下所示：

for(var i=0;i<event.dataTransfer.files.length;++i){ 
    var file = event.dataTransfer.files[i]; 
    var total = event.dataTransfer.files.length; 
    var template = $(templateData); 
    var image = new Image();/*template.find('img')[0];*/ 
    image.onload = (function(image, template, i){    
     return function(e){ 
      /* Size adjustment */    
      var canvas = template.find('canvas')[0]; 
      var context = canvas.getContext("2d"); 
      context.drawImage(image, (canvas.height-image.height)/2, 2, image.width, image.height);    
      window.URL.revokeObjectURL(this.src); 
     } 
    })(image, template, i) 
    image.src = window.URL.createObjectURL(file); 
    bong.upload.files.push(file); 
    $("#imageList").append(template); 
    image = null; 
}

來源

2011-11-21 15:32:18

畫布甚至Img吃RAM和CPU

回答

相關問題