保存 HTML5 画布内容，包括拖动的图像答案

【问题标题】：Save HTML5 canvas contents, including dragged-upon images保存 HTML5 画布内容，包括拖动的图像
【发布时间】：2011-08-19 20:50:20
【问题描述】：

我正在使用画布加载背景图像，然后使用 jQuery UI，我在画布上调用 droppable() 函数并在屏幕上的一堆 PNG 图像（不在画布）。用户在画布上拖动一个或多个图像后，我允许他使用以下函数将内容保存到文件中：

function saveCanvas() {
    var data = canvas.toDataURL("image/png");
    if (!window.open(data)) {
        document.location.href = data;
    }
}

这成功打开了另一个带有图像的窗口，遗憾的是只包含原始背景图像，而不是拖动的图像。我想保存一张展示画布最后阶段的图像。我在这里错过了什么？

感谢您的宝贵时间。

【问题讨论】：

【解决方案1】：

您必须将图像绘制到画布上。

这是一个活生生的例子：

要尝试一下，请将小猫拖放到画布上的某个位置（即小猫上方的正方形）。然后再次移动小猫，看看它是否已被绘制到画布中。

该示例只是展示如何将图像绘制到画布中。在您的应用程序中，您不会使用 draggable stop 方法。相反，为了节省时间，您将遍历pngs，将它们绘制到您的画布上。请注意，jQuery offset() 方法用于确定画布和图像相对于文档的位置。

【讨论】：

【解决方案2】：

您正在保存画布的最终状态。您在画布上拥有图像，而画布对它们的了解为零。

保存所看到的结果的唯一方法是，在调用 toDataUrl 之前，您必须对每个图像调用 ctx.drawImage 并将它们实际绘制到画布上。

为调用 drawImage 获取正确的坐标可能会很棘手，但并非不可能。您可能必须使用图像的 pageX 和 pageY 坐标，然后将它们相对于画布自己的 pageX 和 pageY 绘制到画布上。

【讨论】：