質問: (src[idx] / 255).toFixed(5); } } } } ``` 上記の処理を4つの画像に対して行っているということです。 この部分の処理速度を上げたいのですが何か良い方法はありますでしょうか?(何かライブラリを使うとか、ピクセルデータのやり取りの工夫等) わかりにくい質問化とは思いますが、ご回答を頂けると助かります_(._.)_
回答: 「ネットワークを介して行うと」とのことですから、 var canvas_img = new Image; canvas_img.src = "picture/test1.png"; ここでスクリプトの実行毎に"picture/test1.png"を読み込んでいます。コンテンツのロード時に一度だけ読み込んでおくようにすれば改善するのではないでしょうか。俗にいう「画像のプリロード」というやつです。 とはいえ何かのイベントではなく、「リロード毎に遅い」のでしたら、改善のしようがありませんが(毎回プリロードするだけなので)。 たしかにピクセル単位の処理は重そうですが、「ネットワークを介して行うと」という前置きがあるので、まずはそちらから取り組むのがよいかと思います。 4枚の580×1580pxのpng画像というのは、合計でMB単位のサイズになると思います。コンテンツの配信元とあなたの環境とのスループットによっては数秒待たされることになっても不思議ではないです。