0

FileReader API について少し助けが必要です。外部の FileReader からデータを取得する方法はありますか。FileReader を使用して画像を読み取るメソッドを使用した「クラス」があり、画像データをクラスのローカル変数に入れたい (次のコードに示すように)。

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;
}
4

2 に答える 2

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);
}
于 2013-04-23T19:45:20.297 に答える
0

これはthis、関数での設定方法の問題です。あなたがするとき：

    foo.bar();

this内bar()になりますfoo。しかし、そうする場合：

    var bar = foo.bar;
    bar();

thisグローバルオブジェクトになります。

あなたの場合、問題は、 を設定するときreader.onloadに、 CanvasState プロトタイプから引き出された関数に設定していることです。リーダーがその関数を読み込んで呼び出すと、上記の例のように がthisグローバル オブジェクトになり、 の内部とは異なりaddImageます。

これを修正するには、bind()メソッドを使用して新しい関数を作成し、loadImageData期待thisどおりに呼び出すことができます。

基本的に、次のように変更します。

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

に：

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

詳細とインタラクティブな例については、JavaScript 関数のバインドを確認してください。

于 2013-09-15T22:28:07.093 に答える