Ao tentar desenhar uma imagem em um canvas, após o load, ambos os navegadores (Ie 11 e Edge) elevam o uso de memória a números elevadíssimos, tipo:
1,5 GB!
Enquanto os demais utilizam, no máximo: 300MB.
A instância de Image e FileReader está fora do loop, pois são várias as imagens adicionadas e, parece que, ao substituir o valor das variáveis, o espaço alocado anteriormente não é removido.
var renderizarImagens = function (index) {
_reader.onload = (function (theFile) {
_imgRender.onload = function () {
var larguraOriginalImagem = this.width,
alturaOriginalImagem = this.height;
var larguraImagem = larguraOriginalImagem,
alturaImagem = alturaOriginalImagem,
canvas, canvasAux;
var alturaThumb = 200;
var larguraThumb = larguraImagem * alturaThumb / alturaImagem;
canvas = document.createElement('canvas');
canvas.height = alturaImagem;
canvas.width = larguraImagem;
var ctx = canvas.getContext('2d');
ctx.drawImage(origem, 0, 0, parseInt(larguraImagem), parseInt(alturaImagem));
};
_imgRender.src = this.result;
});
_reader.readAsDataURL(file);
}
};