如何在网页/加入2图像上捕获内容的屏幕截图

Question

我有一个页面，我使用Raphael.js实际上允许用户在具有背景图像的画布周围移动一个点。我想要做的是捕获画布的最终图像，在用户点击“确认位置”按钮后，我将能够看到用户放置点的位置。我想过两种方法，但是我不太清楚如何执行它们。

方法1：将画布捕获为图像。不知何故单独使用Javascript是不可能的，而且我不太确定Raphael是否有内置函数来允许这个。我还读到了关于导出svg xml文件并将其传递到像'Batik'这样的库但是我不确定如何做到这一点。我读过的教程非常令人困惑。

方法2：使用点的坐标并将我已经拥有的点图像叠加到背景图像上并将其保存为图像。

请建议，我希望我已经清楚了。

Answer 1

您可以实现此服务器端：

• 使用JavaScript获取SVG代码
• 使用XHR将其发送到服务器上的PHP脚本
• 让PHP将SVG保存到文件中并使用Inkscape将其转换为一个命令：
  inkscape in.svg -e out.png -w 300 -h 500
• 将新创建的文件的名称发送回客户端
• 在JavaScript中显示指向图片的链接

此方法不提供VML支持（Internet Explorer的矢量图形格式）;但是，您可以使用VectorConverter将VML转换为SVG。