Question

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

我想自动上传图片的过程，应该自动捕捉图片。我的脚本应该截取用户在 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>

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

结果

结果画布

Answer 1

不是纯粹的PHP。如今，大量网站使用js动态生成内容。它只能由浏览器呈现，但好消息 - 有一些叫做phantomjs的东西 - 没有UI的浏览器。它可以为你做好工作，即使他们在他们的教程中工作example，我几年前成功实现了javascript的小知识。还有一个名为nightmarejs的替代图书馆 - 我知道这只是来自朋友的意见，它说它比幻影更简单，但我不保证你不会做噩梦 - 我个人没用过它

Answer 2

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

那样的东西

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 ..，一切。就像浏览器一样。

Answer 3

我喜欢php，但对于屏幕截图，我发现使用 phantomjs 可以提供最佳效果

示例文件 screenshot.js

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

然后从shell：

phantomjs screenshot.js

或者来自php：

exec("phantomjs screenshot.js &");

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

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

Example output

从浏览器javascript和html2canvas，结果并不完美，但主要是在花哨的响应式网站上。

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

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

Example output

从外部网站截取屏幕截图

方法1

方法2

更新

3 个答案: