Canvas incluso Img comiendo RAM y CPU

Estoy tomando una list de files caídos en el área. y luego get su dataUrl y ponerlos en un Img. y luego poner esa image en canvas usando drawImage . Hago escalado de imágenes de acuerdo con su tamaño. Funciona correctamente Pero el problema es incluso después de que la operación se completa. por ejemplo, mucho después de que los Canvas se hayan agregado a la CPU dom y el uso de la memory sea alto. solo para mostrar el canvas se necesita una gran cantidad de CPU y memory.

Code inside drop event:

  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); } 

Actualmente estoy probando arrastrando 20 imágenes (sums de hasta 45 MB) para que se creen 20 canvass. Es eso demasiado ?

EDITAR

Incluso probé usando IMG en vez de canvas. por ejemplo, usar IMG con dataUrls solamente. Pero de esta manera también. ralentiza de la misma manera. Entonces, ¿hay alguna pérdida de memory en mi código?

Creo que es un problema con respecto a chrome bug#36412 Los data: url está ocupando memory pero no liberando eso. y eso está causando el problema potencial. Lo arreglé usando window.URL.createObjectURL y window.URL.revokeObjectURL . para webkit es window.webkitURL en su lugar. Ahora funciona bien incluso con más de 30 imágenes. El código actual se ve así:

 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; }