php - 将 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。

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

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

谢谢。