複数の画像を1枚の画像に連結したい

Question

環境:html5,Javascript(jQuery)

質問があります。

Javascript(jQuery)を使って、
複数の画像を1枚の画像に連結する方法はあるでしょうか？
合成でなく、連結です。

状況としては、複数のimgタグがあり、それを重ね合わせるのでなく、右上、左上、右下、左下といったように連結して1枚の画像にしたいと思っています。

ただcanvasでは合成になってしまったり、phpではないのでImageMagickも使えません。

もしいい方法がある方やご指導頂ける方がいればよろしくお願いします。

Answer 1

canvas上で貼り合わせてからtoDataUrl()で一枚絵として取り出すという方法ではいかがでしょうか。
http://www.html5.jp/canvas/ref/HTMLCanvasElement/sample/toDataURL.html

Comments

[k499778]

yudaさん
回答ありがとうございます。
それは試したのですが、連結というよりは合成という感じで重ね合わさってしまいます。
実現したい右上、左上、右下、左下に配置するようなことができかねます。
座標を決めたり、縮尺も変えることはできますが、いまいち想い通りの配置ができなかったりします。

迅速な対応感謝しています。

[yuba]

なるほど、canvasに貼っただけでは一枚絵にならないと困っていたわけではなくて望む形のなり合わせにならないと困っておられたわけですね。失礼しました。

Answer 2

html2canvasを使って複数の画像を1枚の画面キャプチャとして取得しました。

Answer 3

この辺りは参考になりそうでしょうか？

http://stackoverflow.com/questions/6765370/merge-image-using-javascript

http://paulrouget.com/e/concatenate/

Comments

[k499778]

hayatomoさん
返答ありがとうございます。

英語の文献ということで帰ってからゆっくり読んでみたいと思います。

ありがとうございます。

Answer 4

画像をテーブルにしてしまうのはどうでしょうか

<table cellpadding="0" cellspacing="0">
		<tr>
			<td>
				<img src="banner_s.jpg"
			
			</td>
			<td>
				<img src="banner_s.jpg"
			
			</td>
		</tr>
		<tr>
			<td>
				<img src="banner_s.jpg"
			
			</td>
			<td>
				<img src="banner_s.jpg"
			
			</td>
		</tr>
	</table>

Comments

[k499778]

dateさん
回答ありがとうございます。

想定としては1枚にした画像をダウンロードできるようにしたいと思っています。

テーブルにすることで見た目は1つに見えますが、1枚の画像としてダウンロードすることはできるのでしょうか？

迅速な対応感謝しています。