Javascript 如何截屏网页内容/加入2张图片

我有一个页面，我使用Raphael.js允许用户在画布上移动一个点，画布上有背景图像。我试图做的是捕捉画布的最终图像，在用户单击“确认位置”按钮后，我可以看到用户将圆点放置在何处。我想到了两种方法，但是我不太确定如何执行它们

方法1：只需将画布捕获为图像。不知何故，单凭Javascript是不可能做到这一点的，我也不太确定Raphael是否有一个内置函数来实现这一点。我还阅读了有关导出svg xml文件并将其传递给类似“Batik”的库的内容，但是我不确定如何做到这一点。我读过的教程真让人困惑

方法2：使用点的坐标，将我已有的点图像覆盖到背景图像上，并将其保存为图像

---

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

您可以在服务器端实现以下目标：

• 使用JavaScript获取SVG代码
• 使用XHR将其发送到服务器上的PHP脚本
• 让PHP将SVG保存到一个文件中，并使用Inkscape在一个命令中进行转换：
  

  inkscape-in.svg-e-out.png-w 300-h 500

• 将新创建文件的名称发送回客户端
• 在JavaScript中显示指向图片的链接

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