画像の上に画像を重ねて、重ねた画像をスクリーンショットしてダウンロード

Question

前提・実現したいこと

画像の上に画像を重ねて、重ねた画像をスクリーンショットしてダウンロードするようにしたいです。

Onclickで呼び出している関数は画像を他の物に変える関数です。

該当のソースコード

<h2>背景の色</h2>
<p>

<button class="btn btn-primary" onclick="bg_pink()">ピンク色</button>
<button class="btn btn-primary" onclick="bg_orange()">オレンジ色</button>
<button class="btn btn-primary" onclick="bg_yellow()">黄色</button>
<button class="btn btn-primary" onclick="bg_blue()">青色</button>
<button class="btn btn-primary" onclick="bg_skyblue()">水色</button>
<button class="btn btn-primary" onclick="bg_green()">緑色</button>
<button class="btn btn-primary" onclick="bg_usugreen()">薄緑色</button>
<button class="btn btn-primary" onclick="bg_purple()">むらさき色</button>
<button class="btn btn-primary" onclick="bg_usupurple()">薄むらさき色</button>
</p>
<h2>背景の色</h2>
<p>
<button class="btn btn-primary" onclick="p_awa()">泡1</button>
<button class="btn btn-primary" onclick="p_na1()">斜め線1</button>
<button class="btn btn-primary" onclick="p_y1()">横線1</button>
<button class="btn btn-primary" onclick="p_y2()">横線2</button>
<button class="btn btn-primary" onclick="p_t1()">縦線1</button>
</p>
  <?php
//https://xxxx.xxx/image/user/にpngとして重ねた画像を保存
$rand = rand(111111111111,99999999999);
echo '<script>
$(function() { 
    $("#download-link").click(function() { 
        html2canvas($("#screen"), {
            onrendered: function(canvas) {
                theCanvas = canvas;


                canvas.toBlob(function(blob) {
                    saveAs(blob, "https://xxxx.xxx/image/user/'.$rand.'.png"); 
                });
            }
        });
    });
});
  </script>';
echo '<button id="download-link" type="button"><a donwnload="" href="https://xxxx.xxx/image/user/'.$rand.'"  class="btn btn-primary">サムネイルをダウンロード</a></button>';
?>
</div>
<p><div id="screen"><img id="p" height="340" width="480" src="sozai/parts_awa.png" style="z-index: 2; position: absolute;">
<img id="bg" height="340" width="480" src="sozai/background_pink.png" style="z-index: 1; position: absolute;"></div></p>

試したこと

divタグをスクリーンショットする記事を見かけたので試してみましたが、imgタグがdivの中に入っていないのでスクリーンショットできませんでした。

補足情報（FW/ツールのバージョンなど）

Bootstrapを入れています

Comments

[yambejp]

スクリーンショットの定義がわかりません
画像を重ねるだけではいけないのでしょうか？
それと本処理はサーバー側にやらせたいのでしょうか？
それともクライアント側でしょうか？

[退会済みユーザー]

スクリーンショットは、<img>を挟んでいる<div id="screen"></div>でするようにしたいのですが、<div>が<img>を挟んでいない判定になっているので解決が出来ていません。処理はクライアント側で行いたいです。

[yambejp]

canvasでつくって適当な画像形式に変換すればよいでしょう

Answer 1

imgにtopとleftを指定するとうまくいくと思いますがどうでしょう？