Image APIを使用して100MBを超える画像ファイルをプレビューすると、broswerがフリーズする

Question

まず、検索して読みましたが、私はこの問題に関するSEの質問をすべて読んでいると思います。 （実際の例で）

これは私が達成しようとしているものです：ユーザーがブラウザで画像を選択し、filereaderを使用してアップロードする前にプレビューを生成します。問題は、大きなファイル、50MB以上の画像、100MBの画像でぼろぼろです。

私は何十ものソリューションを試してきましたが、すべてがブラウザのUIをフリーズしているようです。良質のプレビューを生成するために、私はファイルリーダーとキャンバスを使用して画像を縮小します。私が気づいた何

はダウンスケールし、補間が起こるとcanvas.toDataURL("image/png");コール

中にときフリーズが起きてから（多分ウェブの労働者を使用して？）これを回避する方法はありますが起こるということですか？私が言ったように、私はいくつかのライブラリを試してスタックの質問の大部分を読んだが、この問題に関連するものは答えがない。

私はこれらの2つの問題に遭遇しました：

• readAsDataURLは50メガバイト/ 100MBの画像を超えるためにbase64でエンコードされた、非常に長い 行を返します（base64では、ファイル サイズよりも137パーセント大きいので、これはあります）システムメモリに保存 - そのイメージがロードされている間、canvas.toDataURL()からページ全体がフリーズし、大きな画像をロードするときに、これはパフォーマンスの問題
• かもしれません

これを行い、うまく動作し、いくつかの例を示し説明することができる人がいるなら、それはすばらしいでしょう。

Answer 1

Mozillaが例を挙げてhere readAsDataURLの使用方法を示します。私は50MBの画像で試して、完全に動作します（ImageJ 10000 * 10000ピクセルのランダム値RGBを使用する画像を作成するため）。私はtoDataURL（）関数は非常に長い文字列を作成し、ブラウザでは判読できなくなると思います。