javascript - キャンバスを操作するときの無反応を防ぐ

Question

大きな画像をいくつかの小さな画像に分割してから、それらの小さな画像に対してデータ操作を実行したいと思います。2番目の部分は、データをWebワーカーに渡すことができるので問題ありませんが、画像の分割にはキャンバスが使用され（Webワーカーがないため）、実行中にページの残りの部分が応答しなくなります。

これは、アニメーションの読み込みが一時停止して無意味になることを除けば、実際には問題にはなりません。

GUIをフリーズせずに画像分割キャンバス操作を実行するための最良の方法は何ですか？

Answer 1

一度に小さい四角形で使用getImageDataするだけで、はるかにうまくいくでしょう。

適切なサイズを見つけるには時間がかかりますが、最初は 200x200 と 400x400 を試してみてください。

画像の 5/10/15/20% ごとに処理を終了するたびに、読み込みアニメーションを更新することもできます。