FileReader에서 데이터를 가져 오는 방법

Question

FileReader API에 대한 약간의 도움이 필요합니다. FileReader 외부에서 데이터를 가져 오는 방법은 없습니까? ImageReader를 사용하여 이미지를 읽는 메서드가있는 "클래스"가 있고 다음 코드와 같이 이미지 데이터를 클래스 로컬 변수에 저장하려고합니다.

FileReader가 비동기 적으로 작동하고 해결책이 잘못되었다는 것을 알고 있습니다. 어떻게 작동 시키는가? 고맙습니다.

CanvasState.prototype.addImage = function(inputFile) { 
    var file = inputFile; 
    var reader = new FileReader(); 
    reader.onload = this.loadImageData; 
    reader.readAsDataURL(file); 
} 

CanvasState.prototype.loadImageData = function(e) { 
    this.hasImage = true; 
    this.imageData = e.target.result; 
} 

Answer 1

이 시도 :

CanvasState.prototype.addImage = function(inputFile) { 
    var file = inputFile, self = this; 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
      self.hasImage = true; 
      self.imageData = e.target.result; 
     }; 

    reader.readAsDataURL(file); 
} 

Answer 2

이것은 this이 기능을 설정하는 방식에 문제가있다. 당신이 할 경우 : bar() 내부

foo.bar(); 

this는 foo 될 것입니다. 그러나해야 할 일 :

var bar = foo.bar; 
    bar(); 

this은 전역 개체가됩니다.

reader.onload을 설정하면 CanvasState 프로토 타입에서 빼낸 함수로 설정하는 것이 문제입니다. 판독기가로드 된 다음 해당 함수를 호출하면 this이 전역 객체가되고 addImage과 같지 않은 위의 예와 같습니다.

이 문제를 해결하려면 bind() 메서드를 사용하여 this으로 예상되는 loadImageData을 호출하는 새 함수를 만들 수 있습니다. 기본적으로

변경 :

... 
reader.onload = this.loadImageData; 
... 

에 :

... 
reader.onload = this.loadImageData.bind(this); 
... 

확인 더 많은 정보와 상호 작용하는 예는 JavaScript Function bind.