Question

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

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

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

感谢您的时间。

Answer 1

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

这是一个实例：

要尝试一下，将小猫拖到画布上方（小猫上方的正方形）的某处。然后再次移动小猫，看它是否已被画入画布。

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

Answer 2

你保存画布的最终状态。你在画布上面有图像，画布对它们一无所知。

您可以保存所见内容的唯一方法是，在致电toDataUrl之前，您必须使用每个图片调用ctx.drawImage并实际将它们绘制到画布上。

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