从外部网站截取屏幕截图答案

【问题标题】：Take screenshot from external website从外部网站截取屏幕截图
【发布时间】：2018-05-07 14:07:01
【问题描述】：

我正在开发一个起始页，用户可以在其中使用公式来添加指向页面的链接。他们可以添加名称、url、说明和上传图片。

我想自动化上传图片的过程，应该自动捕获图片。我的脚本应该截取用户在 url 中输入的网站的屏幕截图。我知道我可以使用 html2canvas 截取 html 元素的屏幕截图。

方法 1

我的第一种方法是将外部网站加载到 iframe，但这不起作用，因为某些页面限制了这一点，例如甚至 w3schools.com 上的 iframe 教程也不起作用，我得到 Refused to display 'https://www.w3schools.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

HTML

<div id="capture" style="padding: 10px; color: black;">
    <iframe src="https://www.w3schools.com"></iframe>
</div>

方法2

我的下一个方法是调用我的网络服务器，它会加载目标网站并将 html 返回给客户端。这可行，但目标站点未正确呈现，例如图像未加载。（见下面的截图）

HTML

<div id="capture" style="padding: 10px; color: black;"></div>

var testURL = "http://www.google.de";

$.ajax({
    url: "http://server/ajax.php",
    method: "POST",
    data: { url: testURL},
    success: function(response) {

       $("#capture").html(response);
       console.log(response);

        html2canvas(document.querySelector("#capture")).then(
            canvas => {
                document.body.appendChild(canvas);
            }
        );
   }
});

PHP

if (!empty($_POST['url'])) {
    $url = filter_input(INPUT_POST, "url");
}

$c = curl_init($url);
curl_setopt($c, CURLOPT_RETURNTRANSFER, true);
//curl_setopt(... other options you want...)

$html = curl_exec($c);

if (curl_error($c))
    die(curl_error($c));

// Get the status code
$status = curl_getinfo($c, CURLINFO_HTTP_CODE);

curl_close($c);
echo $html;

有可能实现吗？

更新

我设法通过更改我的 ajax 加载了一些图片，但它们不是由 html2canvas 呈现的。？？

var testURL = "http://www.google.de";

$.ajax({
    url: "http://server/ajax.php",
    method: "POST",
    data: { url: testURL},
    success: function(response) {

       response = response.replace(/href="\//g, 'href="'+testURL +"/");
       response = response.replace(/src="\//g, 'src="'+testURL +"/");
       response = response.replace(/content="\//g, 'content="'+testURL +"/");

       $("#capture").html(response);
       console.log(response);

        html2canvas(document.querySelector("#capture")).then(
            canvas => {
                document.body.appendChild(canvas);
            }
        );
   }
});

结果

结果画布

【问题讨论】：

查看无头客户端。由于您使用的是 PHP，因此 PhantomJS 可能是一个不错的起点。
似乎 html2canvas 存在动态内容问题。
谢谢2，明天我会试试你的解决方案。

标签： javascript php jquery curl html2canvas

【解决方案1】：

我喜欢 php，但对于屏幕截图，我发现使用 phantomjs 提供了最好的结果

示例文件 screenshot.js

var page = require('webpage').create();
page.open('https://stackoverflow.com/', function() {
  page.render('out.png');
  phantom.exit();
});

然后从外壳：

phantomjs screenshot.js

或者来自php：

exec("phantomjs screenshot.js &");

这里的目标是从php生成js文件。

在同一文件夹中生成一个名为 out.png 的文件。这是全高页面截图。

Example output

我们还可以通过命令行使用 Firefox 进行良好的捕获。这无论如何都需要 X。

firefox -screenshot test.png  http://www.google.de --window-size=1280,1000

Example output

【讨论】：

【解决方案2】：

不在纯 php 中。如今，大部分网站都使用 js 动态生成内容。它只能由浏览器呈现，但好消息 - 有一个叫做 phantomjs 的东西 - 没有 UI 的浏览器。它可以为您完成工作，即使他们在他们的教程中有工作 example，我几年前成功地实现了这些教程，但对 JavaScript 的了解很少。有一个名为nightmarejs 的替代库 - 我只从朋友的意见中知道这一点，它说它比幻像更简单，但我不能向你保证它不会是一场噩梦 - 我个人没有使用它。

【讨论】：

请注意，我们强烈建议不要使用仅链接的答案。如果您无法在答案中提供有关如何实施推荐解决方案的相关示例，那么这确实应该是一个评论。
请考虑到 phantomjs 不再处于积极开发中，因为（除其他原因外）无头 Chrome 现在已经成为一种东西 (developers.google.com/web/updates/2017/04/headless-chrome)
@PatrickQ - 这不仅仅是链接的答案。我给出了两种可能的技术来实现这个目标。问题不是关于全面实施，而是关于实现它的方法。为什么许多用户不明白对于某些问题代码是不必要的。当人们要求一种方法来做某事时——而不是为他们做这件事。
@SergiuParaschiv 我不知道headles chrome，所以我没有提到它：D +1 for You。我认为这可能是答案之一——不仅仅是我的评论；）

【解决方案3】：

这是可能的，但如果你想要一个屏幕截图，你需要一个像浏览器这样为你呈现页面的东西。 iframe 方法就是这样进行的。但 iframe 是页面本身。如果你想要 .jpg 、 .png 或类似的文件，我认为最好的方法是使用 wkhtmltoimage。 https://wkhtmltopdf.org/。这个想法是在服务器中安装 Qt WebKit 渲染引擎，就像在服务器中安装浏览器一样，这会渲染页面并将最终结果保存在文件中。当某些用户提交一个 url 时，您将其作为参数传递给 wkhtmltopdf，然后您就可以获得该 url 的图像。基本用途可能类似于

wkhtmltoimage http://www.example1.com /var/www/pages/example1.jpg

您应该在 bash 中运行该语句，从 php 可以是：

 <?php
exec('wkhtmltoimage http://www.example1.com /var/www/pages/example1.jpg');
?>

请记住，wkhtmltoimage 执行 css、javascript..，一切。就像浏览器一样。

【讨论】：