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

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

ただいまの
回答率

88.77%

配列内に格納された画像のパスの順に画像を合成したい。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,446

tarotarosu

score 114

前提・実現したいこと

Canvasを使用した画像合成に関する質問です。
タイトル通り、配列内に画像パスを格納し、格納されている順に画像を合成したいと考えています。
どのようにして実現したらよいでしょうか?
単にループで描画すると、画像が表示されたりされなかったりで…
(onloadについて今一つ理解できていないように思います)
何かご回答を頂けると助かります_(._.)_

追記

ソースコードを記述しました。
配列内の要素数(パス)が1つの場合は正常に画像が表示され、2つの場合は2つ目のみが表示され、3つの場合は何も表示されませんでした。
理想は、配列内のすべての画像を合成したいのですが、どう実現してよいのかわかりません。
ロードの問題だとは思うのですが…。
ご回答よろしくお願いします_(._.)_

var fileArry = ["picture/test1.png", "picture/test2.png", "picture/test3.png"];   // 読み込みたい画像のパスの配列
$(function(){
  var canvas = document.getElementById("texture_target");
  if(canvas.getContext){
    var context = canvas.getContext("2d");
    for(var i = 0; i < fileArry.length; i++){
      context.globalCompositeOperation = "source-over";
      context.globalAlpha = 1.0;
      var parts_img = new Image;
      parts_img.src = fileArry[i];
      parts_img.onload = function(){
        context.drawImage(parts_img, 0, 0);
      };
    }
  }
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • unau

    2016/04/25 10:11

    「単にループで描画すると、画像が表示されたりされなかったりで」という、ご自身で書かれたコードを示していただいたほうが回答を得られやすいと思います。

    キャンセル

  • tkanda

    2016/04/25 10:55

    「画像を合成」とは具体的にどのような処理を行いたいのか、について説明を追記されるとよいのでは。

    キャンセル

  • tarotarosu

    2016/04/25 11:00

    確かにコードがなくてはわからないですね。
    質問を編集しましたので、改めて見ていただけると助かります。

    キャンセル

回答 1

check解決した方法

0

下記サイトを参考に作り直したところうまく動きました。
http://qiita.com/akase244/items/9f3c60219f903254a6e2
根本的な部分を理解していないという点が多々ありますので、勉強しなおしたいと思います。
回答してくださった皆様、ありがとうございました_(._.)_

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/04/25 17:21

    解決してよかったです。
    問題にぶつかった別の人が検索して、この質問にたどり着くかもしれません。ですので、質問も回答も充実していれば、意味のあるコンテンツになります。kerokero335 さんが悩んだ、ということは、他の人も悩む可能性が少なくない、ということだと思います。
    ですので、行き詰まったらまた質問されればよいと思います。もちろん、回答者への敬意は必要であり、その一つが、どのように考えたのか、どういうコードを書いたのか、という情報をできるだけ出す、ということだと思います。逆に、回答者も質問者や他の回答者への敬意は持つべきです。お互いに敬意をもってやりとりすることで、よりよい役に立つコンテンツができあがるものと思います。

    キャンセル

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

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

関連した質問

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