JavaScriptで複数背景画像を用いて一枚の写真に合成したい

Question

現在複数のDIV要素に決まったサイズ(500x500px)の画像を、スタイルシートで背景画像を設定しています。

例えば「仕上がりボタン」を押すことにより、
それらをレイヤー状に重ねて背景画像としてではなく、
1枚の写真に合成しダウンロードまでさせたいです。
※写真はすべて透明ありPNGファイルです。

JavaScriptでこんなことは可能でしょうか？
サーバーは共用レンタルサーバーです。

<div id="wrapper"> <div id="1"></div> <div id="2"></div> <div id="3"></div> <div id="4"></div> </div>

現在のhtml的にはこんな単純なものです。
html5でPCを前提にしていますが、スマホでも実現できれば最高です。

Comments

[m.ts10806]

>可能でしょうか？
「可能です」だけで良いですよね。
でなきゃ、質問じゃなく作業依頼です。

Answer 1

1枚の写真に合成しダウンロードまでさせたいです

Canvas APIを学習する必要がありますが、可能です。

Googleの検索結果を探るとサンプルコードも見つかると思います。

Canvasを十分に理解されているのであれば
PixiJSのようなWebGLファーストの2次元画像処理ライブラリを活用することで、高速処理できます。