0

そのため、FileAPI を使用できるブラウザーを使用している場合、ユーザーのハード ドライブから画像を読み取り、サムネイルとして表示するために作成したこの関数を使用しています。

// loop over them sequentially to prevent hogging memory
function load(i) {
    reader.onload = (function(file) {
        return function(e) {
            var loadNext = function(i) {
                if (data[i + 1] !== undefined) {
                    setTimeout(function() {
                        load(i + 1);
                    }, 100);
                }
            };

            if (e.target.result.match(/^data\:image\/.*$/) === null) {
                loadNext(i);
                return;
            }

            // output file name
            placeholders[i].custom.children.title.html(file.name);

            // the server has returned an error, don't load the image
            if (placeholders[i].custom.error === true) {
                placeholders[i].custom.update({loaded: true});
                loadNext(i);
                return;
            }

            // create new image
            var $image = $('<img />')
                .attr('alt', '')
                .attr('src', e.target.result)
                .attr('title', file.name);

            // setup remove link
            placeholders[i].custom.children.remove
                .click(function(event) {event.preventDefault();})
                .attr('data-file-name', file.name);

            // once finished loading
            $image.load(function() {
                if (placeholders[i].custom.error !== true) {
                    placeholders[i].addClass('success').attr('id', 'preview-' + file.name)
                    placeholders[i].custom.children.content.html($image);
                }
                placeholders[i].custom.update({loaded: true});

                loadNext(i);
            });
            return;
        }
    })(data[i]);

    reader.readAsDataURL(data[i]);
}
load(0);

問題は、特に大きなファイルまたは多数のファイルをアップロードすると、CPU 使用率 (クロム) とメモリ使用率 (Firefox) が急増する傾向があることです。

私は少し前にこの問題に対処していました (このプロジェクトを停止して、それに戻る必要がありました)。ファイルが (<input type="file" multiple="multiple" />要素から) 順番にロードされることを確認することで、問題の一部を無効にすることができました。残念ながら、それでもまだ十分ではなかったので、データをチャンクにロードし、各チャンク (スライスと readAsArrayBuffer) の読み取りに短い遅延を追加する作業を開始しました。これにより、読み取りに関する問題の大部分が修正されました。

配列バッファからキャンバスにデータを出力するにはどうすればよいですか? 前回表示されたものを取得しましたが、見分けがつかないほどスクランブルされていました。

4

1 に答える 1

0

http://jsfiddle.net/8A3tP/1/

これが私がそれをやった方法です。window.btoa()バイナリ データを (readAsArrayBuffer の代わりに readAsBinaryString を使用して) base64 文字列に変換するために使用します。そこからイメージ オブジェクトを作成し、var image = document.createElement('img'); image.src = result;それを使用してキャンバスに Canvas2DContext.drawImage(image, 0, 0); を設定できます。

于 2012-09-21T12:19:09.633 に答える