Webワーカーを使用して、画像操作のパフォーマンスを向上させます

この記事では、HTML5でのJavaScript画像操作を調査し、並列化のためにWebワーカーを使用したパフォーマンスの最適化に焦点を当てています。 重要なテイクアウトは、特に複数のコアを備えたローエンドのデバイスの場合、Webワーカーの利点を強調しています。 セピアトーン効果は、テストケースとして機能します

最初の「ブルートフォース」アプローチは、メインスレッドのピクセルごとにセピアエフェクトピクセルを適用し、特に強力なハードウェアでパフォーマンスが遅くなります。 コードは、キャンバス要素を使用して、ピクセルデータに直接アクセスして操作します。

HTML構造は簡単です。画像（）が表示され、キャンバス要素が処理された画像を表示します。 JavaScriptコードは、より自然なセピア効果のためにランダムノイズ係数を組み込んだ式を使用して、各ピクセルの新しいRGB値を計算します。

コアセピア処理関数（

）は、再利用のためにmop.jpgで定義されています。 メインスクリプト（）は、最初にブルートフォース法を採用し、すべてのピクセルを繰り返します。これは、Webワーカーの実装と比較されます

Webワーカーアプローチは、画像をセグメント（この例では4）に分割し、それぞれを別のワーカーに割り当てます。 各労働者は独立してセグメントを処理し、処理時間を大幅に短縮します。 その後、結果はメインスレッドで再結合されます。

ファイルには、イメージデータの一部を受信し、処理し、結果をメインスレッドに送り返すワーカーコードが含まれています。 processSepia tools.jsdefault.js

パフォーマンスの比較は、特にローエンドのハードウェアで顕著なWebワーカーを使用して達成される大幅な速度の改善を示しています。 ただし、この記事では、スレッド間のデータコピーのオーバーヘッドにより、ハイエンドマシンのパフォーマンスの向上はあまり顕著ではない可能性があることも指摘しています。 画像操作タスクの複雑さは、Webワーカーの使用を正当化する必要があります。 この記事は、Windows 8アプリケーションにコードを移植することについての議論と、Webワーカーと画像操作のパフォーマンスに関する一般的な質問に対処するFAQセクションについて説明します。 Webワーカーを使用した最終結果を以下に示します

pictureProcessor.js

以上がWebワーカーを使用して、画像操作のパフォーマンスを向上させますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。