jquery - 多くの div オーバーレイから画像を生成する

Question

多くのサブ div を持つメイン div があり、これらのサブ div には、そのメイン div で互いにオーバーレイされてメイン イメージを作成するサブ イメージを持つ img タグがあります。すべての img タグの全体的なイメージであるメイン div のイメージを実際に取得する方法はありますか? それを行うためのjqueryプラグインはありますか？アドバイスをいただければ幸いです。ありがとう！

キャンバス タグを使用してみましたが、内部の img タグが表示されません。htmlは以下の通りです

<canvas id="shirt_display">      
     <img src="'.base_url().'marcella-resources/front/img/'.$collection[$num].'/SBase1.png" data-type="Base">
     <img src="'.base_url().'marcella-resources/front/img/'.$collection[$num].'/CollarInner.png" data-type="Inner Collar Back">
     <img src="'.base_url().'marcella-resources/front/img/'.$collection[$num].'/CollarOuter.png" data-type="Inner Collar Front">
      <img src="'.base_url().'marcella-resources/front/img/Button/B_Black/ICollarB.png" data-type="Inner Collar Buttons">
      <img src="'.base_url().'marcella-resources/front/img/Button Holes/BH_Black/ICollarBH.png" data-type="Inner Collar Button Holes">
</canvas>  

クリック イベントを作成して、画像を取得できるかどうかをテストします。私のjqueryは以下の通りです

$('.test').click(function()
{
    var canvas=document.getElementById('shirt_display');
    var ctx=canvas.getContext('2d');
    window.open('', document.getElementById('shirt_display').toDataURL());
})