FileReader readAsArrayBuffer 데이터를 html5 캔버스 호환 이미지 데이터로 변환 할 수 있습니까?

Question

html5 FileReader API에서 직접 캔버스로 이미지를 그리는 방법을 찾고 있습니다.

일반적인 방법은 새 이미지 객체를 만들고 onload를 기다린 다음 drawImage()으로 캔버스에 그립니다.

그러나 내가 할 필요가없는 특정 경우에 가능한 모든 경우 이미지 데이터의 로딩을 우회하고 싶습니다.

filereader api가 readAsArrayBuffer()을 지원하므로 이미지를 렌더링하기 위해 ctx.putImageData (배열)를 사용하려면이 arraybuffer를 가져 와서 canvas imageData로 변환 할 수있는 방법이 있는지 궁금합니다.

미리 감사드립니다.

Answer 1

이미지를로드하는 것은 필자가 생각한 필요한 단계입니다. 이 프로세스의 한쪽 끝에는 JPEG 또는 PNG (또는 BMP, 기타 다른 MIME 유형) 일 수있는 2 진 BLOB가 있고 다른 하나에는 원시 픽셀 데이터가 들어있는 배열이 있습니다. 이 변환을 기술적으로 코딩 할 수는 있지만 fileReader.readAsDataURL 및 ctx.drawImage 메서드는 내부적으로이 작업을 수행합니다.

FWIW, his은 캔버스에 이미지를 그립니다.

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