在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＆gt; img]，然后裁剪结果以获取.png文件作为输出（使用Javasript，CSS，HTML，库，但不是PHP）。 我在下面画了它，所以希望我已经清楚地解释了我想要的东西。

重要的是“src”属性应该保留在按钮点击时更改的能力。 提前谢谢！