About はじめに JavaScriptで画像処理をするには、Canvasを使います。この手のサンプルコードはたくさんありますし、Canvas自体ハードルはそんなに高くないので、使ったことがある方は多いかもしれません。 しかし、大量の画像を処理したり、なんども画像処理するような場合、全ピクセルデータを計算するようなコードは非常に負荷がかかり、ユーザビリティを悪化させてしまいます。そこでWeb Worker APIの登場です。 Web Worker APIを使用することによって、JavaScriptでマルチスレッド処理を実現することができます。今回は、「Canvasで画像処理したいが、その処理が重たいので、Workerスレッドにピクセルデータを送って並行処理し、最後にそれを受け取って再描画する」ということをやってみます。 Demo この記事で紹介するコードを使って以下の様なサンプルコードを