Canvasを用いた画像処理（ピクセル処理）の速度を上げたい。

Question

###前提・実現したいこと
現在Canvasを用いて画像処理を行っているのですが、その処理速度が異常に遅いです。

具体的にどのような処理を行っているのかと申しますと、
1, あるボタンをクリックする
2, クリックされたボタンに対応したpng形式の画像をdrawImage()で描画する
3, 描画された画像のピクセルデータをgetImageData()で取得し、それを正規化（/255）したものを配列に格納する
4, 別のCanvas上に描画されている画像のピクセルデータに先ほど取得したピクセルデータを掛け算していく
5, 最終的に得られたものをputImageData()で描画する
という流れです。

この中で特に遅いと感じているのが、3の処理です。580px × 1580px の4枚の画像に対して行っています。ローカル（？）でやってみるとそこまでストレスなく動くのですが、ネットワークを介して行うと2,3秒くらいかかりかなりストレスです。（3と4の処理を切り離して確認してみたのですが、4の処理はサクサク動きます。ですので3の処理が原因なのかと…）

3の部分のコードは以下のような感じです。
（ここで、r_arr[i][j] = (src[idx] / 255).toFixed(5); としかしていないのは画像の1ピクセルごとのRGB値が全て同じ為です。）

###該当のソースコード

var canvas_img = new Image;
canvas_img.src = "picture/test1.png";
canvas_img.onload = function(){
  var canvas_shade = document.getElementById("shade_info");
  if(canvas_shade.getContext){
    var context_shade = canvas_shade.getContext("2d");
    context_shade.clearRect(0, 0, 580, 1580);
    context_shade.drawImage(canvas_img, 0, 0, width, height);
    //画像のピクセル情報を取得
    var srcData = context_shade.getImageData(0, 0, width, height);
    var src = srcData.data;
    //ピクセル情報を配列に格納
    for(var i = 0; i < height; i=(i+1)|0){   
      for(var j = 0; j < width; j=(j+1)|0){
        var idx = (j + i * width) * 4;
        r_arr[i][j] = (src[idx] / 255).toFixed(5);
      }
    }
  }
}

上記の処理を4つの画像に対して行っているということです。
この部分の処理速度を上げたいのですが何か良い方法はありますでしょうか？（何かライブラリを使うとか、ピクセルデータのやり取りの工夫等）
わかりにくい質問化とは思いますが、ご回答を頂けると助かります_(..)

Answer 1

「ネットワークを介して行うと」とのことですから、

var canvas_img = new Image;
canvas_img.src = "picture/test1.png";

ここでスクリプトの実行毎に"picture/test1.png"を読み込んでいます。コンテンツのロード時に一度だけ読み込んでおくようにすれば改善するのではないでしょうか。俗にいう「画像のプリロード」というやつです。
とはいえ何かのイベントではなく、「リロード毎に遅い」のでしたら、改善のしようがありませんが(毎回プリロードするだけなので)。

たしかにピクセル単位の処理は重そうですが、「ネットワークを介して行うと」という前置きがあるので、まずはそちらから取り組むのがよいかと思います。
4枚の580×1580pxのpng画像というのは、合計でMB単位のサイズになると思います。コンテンツの配信元とあなたの環境とのスループットによっては数秒待たされることになっても不思議ではないです。

Comments

[tarotarosu]

https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
上記を参考にしたところ、かなり速く動くようになりました。
また、画像のプリロードについても調べ色々試してみたいと思います。
ご回答ありがとうございました。