canvasとjsでフレーム画像を合成する際に、写真・フレーム共に天地を正しく実装したい。

前提・実現したいこと

http://endlab.net/web/collage.html
こちらの記事の内容そのままで実装を試みています。

発生している問題・エラーメッセージ

画像のEXIF情報を取得して回転する処理が含まれているが、canvas丸ごとの回転処理のため、天地が決まっているフレーム画像を実装すると、画像の向きは正しいがフレームの向きが狂ってしまう。

###解決方針
合成前に読み込んだ画像だけを回転する処理を入れられれば良いかと思うのですが、見当がつけられずにおります。思い当たる解決方法があればご教授いただければと思います。

行動規範の内容に同意します

回答1件

js
1for (var i = 0, l = data.length; i < l; i++) {
2                var d = data[i];
3
4                // アップ、フレーム画像の順番で描画していく
5                ctx.drawImage(d.img, d.left, d.top, d.width, d.height);
6            }
7

ここで処理してるのでは？

投稿2018/10/05 04:35

oikashinoa

総合スコア2826

kukuvon

2018/10/05 05:06

早速のご回答ありがとうございます！ ``` for (var i = 0, l = data.length; i < l; i++) { var d = data[i]; //ここに回転の処理を入れる。 d.img.rotate(90); // アップ、フレーム画像の順番で描画していく ctx.drawImage(d.img, d.left, d.top, d.width, d.height); } ``` 試しにこのようにしてみたのですが `d.img.rotate is not a function` を吐いてしまい...単純にrotateをかますだけではダメですかね...

oikashinoa

2018/10/05 05:27

確実なのはデバッカーで調べるのをお勧めします。外なので直ぐには調べれないです

oikashinoa

2018/10/05 13:50

plunkerで動く環境を作るかご自分の環境でデバッガーでどの行で画像を読み込んで、回転させているか確認して下さい。ソースから追うのは力尽きました。 71行目 ''' // canvasの状態保存 ctx.save(); // canvasを画像の回転に合わせて調整 setCtxProp(exif_orientation); ’’’ ctx.save();で想定通り’回転してしまっている画像が表示して’ setCtxPropで正しい向きになってます？画像の向きが想定通りでないなら、結果もまたおかしくなります（こちらに画像無いから分からない）

kukuvon

2018/10/09 11:10

引き続きのご回答ありがとうございます！ >ctx.save();で想定通り’回転してしまっている画像が表示して’ >setCtxPropで正しい向きになってます？ここは問題ないのですが、元のフレーム画像と合成した後に回転しているため、写真は正しい向きになってもフレーム画像が正しい向きにならない、という状況です。 plunkerで...と思ったのですが、フレームの画像が別ドメインだとクロスドメインでエラーを吐いてしまうようで、再現できず。。

oikashinoa

2018/10/09 11:33

画像も置けると思い込んでPlunkerでお願いしてました…置けなかったんですね。いま試しました。以下の動きだと思っていたのですが違うという事ですか？ kukuvonさんが書かれた動きが正しいなら、どこの行で写真取り込み、回転、フレーム重ね合わせしているかをデバッグしていくと良いと思います。 > 元のフレーム画像と合成した後に回転しているため、写真は正しい向きになってもフレーム画像が正しい向きにならない ```JS imgSet(src).done(function(data) { // ■この時点で画像取り込み終わっていて ctx.save(); // ■Exifにしたがって画像を回転させて setCtxProp(exif_orientation); // ■フレーム画像など回転不要な画像を重ねていく for (var i = 0, l = data.length; i < l; i++) { var d = data[i]; // アップ、フレーム画像の順番で描画していく ctx.drawImage(d.img, d.left, d.top, d.width, d.height); } ```

kukuvon

2018/10/10 02:13

``` // ■Exifにしたがって画像を回転させて setCtxProp(exif_orientation); ``` この処理をコメントアウトすると「フレームは元どおりの正しい向きで、取得した画像が正しくない」状態になるため、画像だけでなくcanvasごと回転させるような処理になってしまっているようです。取得した画像だけを回転させられれば良いのですが....