2

私はこのスニペットを持っています:

<script>
        var reader = new FileReader();
        reader.onload = (function(theFile) {
            return function(e) {
                // Render thumbnail.
                var span = document.createElement('span');
                span.innerHTML = ['<div id="wrap"><img id="image" class="thumb draggable" src="', e.target.result,
                    '" title="', escape(theFile.name), '" draggable="true" /></div>'].join('');
                document.getElementById('list').insertBefore(span, null);
            };
        })(f);

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);

カメラからデータをキャプチャし、div にプレビューを表示する iOS 用のモバイル アプリで使用しています。写真にアクセスするための承認なしに新しいデバイスに初めてアプリをロードする場合を除いて、すべて正常に機能します (初めて写真を撮ろうとすると、プロンプトが表示されます)。

ここでの問題はreader.readAsDataURL(f);、ユーザーがユーザーの写真へのアクセスを承認する前に呼び出すと、reader.onloadトリガーされないことです。

ユーザーの承認のためのリスナーはありますか、またはページの読み込み時にカメラへのアクセス権を持つユーザーを促す方法がありますか?

ありがとう

4

1 に答える 1

1

ここでの問題は 2 つあると思います。

まず、カメラ/ユーザーの写真を呼び出して、ファイルを読み取るこのコードを呼び出すタグで何らかのonchangeイベントをリッスンしていると仮定します。<input type="file" />そうでない場合は、適切なイベントを待つことになるため、間違いなくそうする必要があります。

最後にf、匿名関数に引数として渡します。この関数は、ある種のコードの開始時に、実際のイベント リスナーとなる別の匿名関数を返します。問題は、最初に引数としてreader.readAsDataURL(f);使用することを確認してファイルを呼び出すことではありません。freader.onload

それfがイベントよりも高い範囲にreader.onloadあることを確認すると、次のことができるはずです。

reader.onload = function(e) {
    // Render thumbnail.
    var span = document.createElement('span');
    span.innerHTML =
        ['<div id="wrap"><img id="image" class="thumb draggable" src="',
        e.target.result, '" title="', escape(f.name), // we use f, not theFile
        '" draggable="true" /></div>'].join('');
    document.getElementById('list').insertBefore(span, null);
};

上記では、関数の開始を省略し、f既にスコープ内にある を単に参照しています。この関数も、許可がない限り実行されないため、最初のユース ケースの問題は解決されます。

于 2013-03-12T05:44:07.477 に答える