javascript - HTML ページで複数の画像をマージしてトリミングする

Question

画像でdivをオーバーレイする次のレイアウトのページがあります

    <div class="container">
        <div id="base-wrap">
            <img id="base" src="base.png" />
        </div>
        <div id="img1-wrap">
            <img id="img1" />
        </div>
        <div id="img2-wrap">
            <img id="img2" />
        </div>
        <div id="img3-wrap">
            <img id="img3" />
        </div>
        ... 
        <div id="img10-wrap">
            <img id="img10" />
        </div>
    </div>

#img* の「src」属性は、ユーザーがボタンをクリックすることにより、Javascript で設定および変更されます。これらすべての [div>img] をマージし、結果をトリミングして出力として .png ファイルを取得するにはどうすればよいですか (Javasript、CSS、HTML、ライブラリを使用しますが、PHP は使用しません)。私はそれを下に描いたので、私が欲しいものを十分に明確に説明したことを願っています.

重要なことは、「src」属性は、ボタンのクリック時に変更できる機能を保持する必要があるということです。前もって感謝します！