Phantomjs：截取当前页面？

Question

我正在尝试使用Phantomjs 从用户所在的同一页面捕获屏幕截图。

例如，一个用户在 my-page.html 上并且对该页面的元素进行了一些更改，现在我需要对该页面中的一个元素（DIV）进行截图(my-page.html) 并保存。

我发现了一些Phantomjs and php 的示例，我在我的服务器上进行了测试和工作，它也将图像存储在我的服务器上，但我发现的所有示例都是用于截取外部页面/URL 的屏幕截图，而不是“当前页”。

这在 Html2canvas 中是一个相当简单的过程，但生成的图像质量一点也不好，所以我决定使用 Phantomjs 生成更高质量的屏幕截图，并且它还允许我放大页面。

这是一个使用 Phantomjs 截取外部 URL 的简单示例：

var system = require("system");
if (system.args.length > 0) {
    var page = require('webpage').create();
    page.open(system.args[1], function() {
        //viewportSize being the actual size of the headless browser
page.viewportSize = { width: 3000, height: 3000 };
//the clipRect is the portion of the page you are taking a screenshot of
page.clipRect = { top: 0, left: 0, width: 3000, height: 3000 };
page.zoomFactor = 300.0/72.0;

        var pageTitle = system.args[1].replace(/http.*\/\//g, "").replace("www.", "").split("/")[0]
        var filePath = "img/" + pageTitle + '.png';
        page.render(filePath);
        console.log(filePath);
        phantom.exit();
    });
}

有人可以告诉我这是否可能吗？

编辑（回答我自己的问题），

事实证明，如果页面的元素已被用户实时编辑，则您无法截取当前页面的屏幕截图。您可以使用 phantomjs 截取的唯一屏幕截图是页面的基本内容。

原因：phantomjs 是一个无头浏览器，使用在服务器上运行的 QtWebKit，它不是一个与 html2canvas 相同的 javascript 库。

别人解释和体验过HERE：

另一个对我正在处理的项目来说是个问题的用例是您需要拖放。无头驱动程序具有一些基本功能，但如果您需要能够设置精确坐标，则只能使用 Selenium。

Answer 1

要截取当前页面，您必须将正确的 URL 传递给 Phantom 脚本

语法：

phantomjs <"Phantom code url(as in documentation report.js)"> <"page url of which you want to take scrrenshot"> <"result saving url">

现在假设您传递了正确的 URL：

1. 在我的情况下我无法截取我的页面，因为它有一个 spring 安全注释，所以它不允许我继续，所以请检查你是否有任何安全性如果是，则添加到您的页面，然后将其删除，然后重试。

2. 如果案例 1 不适用于您，您传递的 URL 肯定有问题，请仔细检查。

如果问题仍然存在，请告诉我，请发布您遇到的任何错误（如果发生）。