プログレッシブ画像読み込みの実装

この記事では、Flashを使用せずにサイトにプログレッシブ画像をアップロードする独自の実装の可能性について説明しています。 インタラクティブな描画は、HTML5のcanvas要素によって実装されます。 プロセスのアルゴリズムの基礎は、離散ウェーブレット変換です。



jpg「例」





ブラウザの画像を標準のjpg形式で読み込むことにより、データが到着するとトップダウンのレンダリングが表示されます。 これは、プログレッシブダウンロードの最も単純な例です。 中心からのらせんのオプションがどのような理由で無視されたかはわかりません。ほとんどの写真を見るのに関連しています。 プログレッシブロードのアイデアは、標準のプログレッシブjpgでさらに発展しました。 インターネット上では、すべての主要なブラウザーが長い間この形式をサポートしてきましたが、それは十分にまれです。 描画は、顕著なモザイク構造を持つフレームごとに行われます-jpg標準の機能。 さらに進んで、jpeg2000形式に注意を払おうとします。 jpgとは対照的に、コサイン変換の代わりに、 jpeg2000はウェーブレット変換を使用します。これにより、同じエラー率でアーティファクトブロッキングの少ない圧縮率が向上します。 ウィキペディアは、誕生からのプログレッシブダウンロードをサポートしていると主張していますが、著者はこれを実際に見たことはありません。 さらに、インターネット上で見つかったjpeg2000のすべての例は、ブラウザー(Chrom 18、Explorer 9、Firefox 11)で開くことができませんでした。 fileinfo.com Webサイトには、Windowsブラウザーではjp2形式を開かない情報が含まれています。 この形式は良いものの、まだ実際にはサポートされておらず、隠れた特許の負担になる可能性があることを考慮して、ウェーブレット変換に基づいてプログレッシブロードのバージョンを実装しようとします。



高さと幅が次数2に等しい画像を撮影します(アルゴリズムの制限、それを回避する方法は考慮しません)。 私たちの場合、これは幅と高さが1024ピクセルの白黒マップです。 マルチレベルの2次元ウェーブレット変換プログラムを作成しています。 コードが添付されています: link 。 Haarウェーブレットが使用されますが、コードでは、直交ウェーブレットフィルターやダイアディックウェーブレットを選択することもできます。これらは、アプリケーションが成功する時期について記述されます。 アルゴリズムまたはウェーブレット自体を処理する必要がある人は、信号処理の S. Mall Waveletsによる本をお勧めします 。 プログラムを起動し、画像を指定します。 同じレベル(5レベルの例)と詳細タイプの量子化された(ボリュームを減らすために必要な)ウェーブレット係数が保存されているtxtファイルを取得します。 それらをサーバーにアップロードします。 キャンバスオブジェクトを使用してhtmlページを作成し、ページ読み込みイベントで、以前に作成したウェーブレット係数ファイルを段階的に読み込むスクリプトを作成します。 ファイルがアップロードされるたびに、イメージリカバリ関数(逆ウェーブレット変換)が呼び出されます。 何が起こったのか見てみましょう: link_1(2 Mb) 。 私はすぐに、写真がオリジナルの10倍遅くダウンロードされることを認めます。 実際、量子化された係数はテキストとしてファイルに保存され、1桁多くのスペースを取ります。 ハフマンコードまたは係数の完全な圧縮を適用する必要がありました。 Explorerは、スクリプトの実行中にキャンバスへの変更を表示することを望みません。 Chromeでは、発言アラートを挿入すると、少し改善されます。ステップが表示されます( link_2(2 Mb) )。 コードが「単調に」実行される場合、動作はエクスプローラーに似ています。 Firefoxコードの実行の予測可能性に満足しています。そのため、リンク1をご覧になることをお勧めします。



HTML5を使用してプログレッシブロードを実装できること、最新のブラウザーは(最新のコンピューターで)面倒な数学的計算を許容できると自信を持って言えます。 キャンバスで発生した変更のタイムリーな視覚化と、一般的なプログレッシブロードテーマの関連性に関する質問は未解決のままです。 前述したように、 プログレッシブjpgではあまり見られず、ブラウザはjp2をまったくサポートしていません。



All Articles