質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.81%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 3,721

tarotarosu

score 114

前提・実現したいこと

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+3

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/27 16:12

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.81%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る