javascript - 幻影 : take screenshot of the current page?

Question

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

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

我发现了一些 Phantomjs 和 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是一个 headless 浏览器，使用在服务器上运行的QtWebKit，它不是与html2canvas相同的javascript库。

其他人的解释和经验HERE :

我正在处理的项目的另一个用例是您需要拖放。 headless 驱动程序有一些基本功能，但如果您需要能够设置精确的坐标，则只能使用 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 肯定存在问题，请仔细检查。

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