保存HTML5画布内容，包括拖动的图像 [英] Save HTML5 canvas contents, including dragged-upon images

问题描述

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

I'm using a canvas to load a background image, and then, using jQuery UI, I call the droppable() function on the canvas and draggable() on a bunch of PNG images on the screen (that are not in the canvas). After the user drags one or more images on the canvas, I allow him to save the contents to a file using the following function:

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

这已成功打开另一个窗口，仅包含原始背景图像，而不包含拖动的图像。我想保存一个呈现画布最后阶段的图像。

This successfully open another window with an image, that sadly contains only the original background image, not the dragged images. I'd like to save an image presenting the final stage of the canvas. What am I missing here?

感谢您的时间。

推荐答案

这里是一个实例：

试试看，拖动小猫，把它放在画布上方（这是小猫上方的方块）。然后再次移动小猫，看看它是否已被绘制到画布上。

To try it out, drag the kitten and drop it somewhere over the canvas (which is the square above the kitten). Then move the kitten again to see that it's been drawn into the canvas.

这个例子只是为了展示如何将图像绘制到画布上。在您的应用程序中，您不会使用 draggable 停止方法。相反，在保存时，您可以通过 pngs 进行迭代，将它们绘制到画布上。请注意，jQuery offset（）方法用于确定画布和图像相对于文档的位置。

The example is just to show how an image would be drawn into the canvas. In your app, you wouldn't use the draggable stop method. Rather, at save time you would iterate through the pngs, drawing them on to your canvas. Note that the jQuery offset() method is used to determine the positions of the canvas and images relative to the document.

这篇关于保存HTML5画布内容，包括拖动的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！