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

Question

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

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

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

谢谢你的时间。

Answer 1

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

这是一个活生生的例子：

http://jsfiddle.net/6YV88/244/

要尝试一下，拖动小猫和地方拖放在画布上（这是小猫广场之上）。然后再次移动小猫看它已被画到画布上。

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

Answer 2

你是保存画布的最终状态。您在画布顶部有图像，画布对它们没有任何了解。

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

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