javascript - 从外部网站截取屏幕截图

Question

我正在开发一个起始页，用户可以使用公式将链接添加到页面。他们可以添加名称、网址、描述并上传图片。

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

---

方法一

我的第一种方法是将外部网站加载到 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>

---

方法二

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

HTML

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

JS

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);
            }
        );
   }
});

结果

结果画布

标签： javascriptphpjquerycurlhtml2canvas

Answer 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.ini 生成 js 文件。

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

示例输出

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

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

示例输出