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”属性应该保留在按钮单击时更改的能力。提前致谢！