Question

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

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

我找到了一些我在我的服务器上测试和工作的Phantomjs and php的例子，它也将图像存储在我的服务器上但是我发现的所有示例都是用于截取外部页面/ URL的截图而不是＆＃39;当前页面＆＃39;。

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

以下是使用Phantomjs截取外部网址的简单示例：

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">

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

在我的情况下我无法截取我的页面的屏幕截图，因为它有弹簧安全注释，所以它不允许我继续这样做请检查您的安全性如果是，则添加到您的页面然后将其删除，然后重试。
如果案例1不适用于您，请确保您传递的URL有问题，请仔细检查。

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

Phantomjs：截取当前页面的截图？

1 个答案: