Уменьшение использования памяти и процессора при чтении изображения с помощью FileAPI

Question

Итак, я использую эту функцию, которую я сделал для чтения изображений с жесткого диска пользователей и отображения их в виде миниатюр, если у них есть браузер, способный использовать FileAPI:

// loop over them sequentially to prevent hogging memory 
function load(i) { 
    reader.onload = (function(file) { 
     return function(e) { 
      var loadNext = function(i) { 
       if (data[i + 1] !== undefined) { 
        setTimeout(function() { 
         load(i + 1); 
        }, 100); 
       } 
      }; 

      if (e.target.result.match(/^data\:image\/.*$/) === null) { 
       loadNext(i); 
       return; 
      } 

      // output file name 
      placeholders[i].custom.children.title.html(file.name); 

      // the server has returned an error, don't load the image 
      if (placeholders[i].custom.error === true) { 
       placeholders[i].custom.update({loaded: true}); 
       loadNext(i); 
       return; 
      } 

      // create new image 
      var $image = $('<img />') 
       .attr('alt', '') 
       .attr('src', e.target.result) 
       .attr('title', file.name); 

      // setup remove link 
      placeholders[i].custom.children.remove 
       .click(function(event) {event.preventDefault();}) 
       .attr('data-file-name', file.name); 

      // once finished loading 
      $image.load(function() { 
       if (placeholders[i].custom.error !== true) { 
        placeholders[i].addClass('success').attr('id', 'preview-' + file.name) 
        placeholders[i].custom.children.content.html($image); 
       } 
       placeholders[i].custom.update({loaded: true}); 

       loadNext(i); 
      }); 
      return; 
     } 
    })(data[i]); 

    reader.readAsDataURL(data[i]); 
} 
load(0); 

Проблема заключается в том, что если они загружают особенно большой файл или большое количество файлов, то использование процессора (в хромированном режиме) и использование памяти (в firefox) имеет тенденцию к съемке.

Я обращался к этой проблеме некоторое время назад (мне пришлось остановить этот проект и вернуться к нему), и мне удалось свести на нет некоторые проблемы, убедившись, что файлы (из элемента <input type="file" multiple="multiple" />) загружаются последовательно. К сожалению, этого было недостаточно, поэтому я начал работу по загрузке данных в куски и добавив небольшую задержку при чтении каждого фрагмента (срез и readAsArrayBuffer), который исправил проблему с чтением в большинстве случаев.

Как вывести данные из буфера массива на холст? Я получил что-то, отображающее последний раз, но он был взломан до неузнаваемости.

Answer 1

http://jsfiddle.net/8A3tP/1/

Вот как я в конечном итоге делает это. Я использую window.btoa() для преобразования двоичных данных (используя readAsBinaryString вместо readAsArrayBuffer) в строку base64. Оттуда я могу создать объект изображения с var image = document.createElement('img'); image.src = result; и использовать его для заполнения холста Canvas2DContext.drawImage (изображение, 0, 0);