将所有拖放的图像保存到Div到桌面？

Question

我创建了一个具有Canvas元素的网页，我可以在其中拖放多个图像。我还能够在画布上生成所有已删除图像的单个图像。在这个网站的帮助下，我能够在Javascript中执行此操作，但是跨浏览器存在问题 - 只能在Chrome中完全运行。 caniuse.com/#search=canvas。

这是我用来生成Canvas图像的原因：

    function convertCanvasToImage() {
        var canvas = document.getElementById('canvas');

        var image_src = canvas.toDataURL("image/png");
        window.open(image_src);

    }

这将打开带有图像的新窗口（带有拖放图像）。

由于跨浏览器问题，我能够重建页面以支持我正在寻找使用可在Chrome，IE，Safari和FF上运行的Javascript，HTML和JQuery的各种功能。没有使用Canvas元素。

重新创建的页面使用Div来删除图像而不是Canvas。

如何从这些多个丢弃的图像生成单个图像并通过按钮将其保存到HDD？也就是说，一旦将所有图像拖放到Div，就能够单击“保存”按钮，以便我可以将Div中所有图像的当前位置下载为单个PNG。

令人惊讶的是，到目前为止，我在搜索中找到的最接近的是多年前使用Javascript和PHP的专有dollmakerscript。我在这里和其他地方发现的大多数内容似乎都是指Canvas或在线快照服务。

我在新页面的http://jsfiddle.net/babakt/hvXUK/创建了一个JSFiddle。底部的“bktone”被破坏，因为它指的是不在JSFiddle中的图像文件夹 - 它会更改使用的背景图像。

感谢。