如何截屏网页内容/加入 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。