Можно ли преобразовать файлы FileReader readAsArrayBuffer в html5, совместимый с canvas imageData

Question

Я ищу способ нарисовать изображение на холсте непосредственно из html5 FileReader api.

Обычный метод - создать новый объект изображения, дождаться загрузки и затем нарисовать его на холсте с помощью drawImage().

Однако для конкретного случая, который мне не нужно входить, я хотел бы полностью обойти загрузку данных изображения, если это вообще возможно.

Поскольку filerader api поддерживает readAsArrayBuffer() Мне было интересно, есть ли способ, которым я мог бы взять этот массив буферов и преобразовать его в canvas imageData, чтобы использовать ctx.putImageData (массив) для рендеринга изображения.

Заранее спасибо.

Answer 1

Загрузка изображения - необходимый шаг, я думаю; на одном конце процесса у вас просто есть двоичный blob, который может быть JPEG или PNG (или BMP, любой другой тип mime), а на другом вы имеете массив, содержащий необработанные пиксельные данные. Хотя вы можете технически кодировать это преобразование самостоятельно, методы fileReader.readAsDataURL и ctx.drawImage делают это для вас внутренне.

FWIW, его как я рисую изображение на холсте.

// read binary data from file object 
var fileRead = function(file){ 
    var reader = new FileReader(); 
    reader.onload = fileReadComplete; 
    reader.readAsDataURL(file); 
    }; 

// convert binary data to image object 
var fileReadComplete = function(e){ 
    var img = new Image(); 
    img.src = e.target.result; 
    (function(){ 
     if (img.complete){ 
      ctx.drawImage(img); 
      } 
     else { 
      setTimeout(arguments.callee, 50); 
      } 
     })(); 
    };