javascript - 如何对网页内容进行屏幕截图/加入 2 张图片

Question

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

方法 1:只需将 Canvas 捕获为图像即可。不知何故，单独使用 Javascript 是不可能的，我不太确定 Raphael 是否具有允许这样做的内置函数。我还阅读了有关导出 svg xml 文件并将其传递给“Batik”之类的库的信息，但是我不确定如何执行此操作。我读过的教程真的很困惑。

方法二:利用网点的坐标，将我已有的网点图叠加到背景图上，保存为图片。

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

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。