从外部网站截取屏幕截图

Question

我正在开发一个初始页面,用户可以使用公式来添加页面链接.他们可以添加名称,网址,说明和上传图片.

我想自动上传图像的过程,应该自动捕获图像.我的脚本应该截取用户在网址中输入的网站的屏幕截图.我知道我可以使用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 的浏览器。它可以为你做工作，即使他们的教程中有工作示例，我几年前凭借对 javascript 的少量了解成功实现了这些示例。有一个名为nightjs的替代库- 我只是从朋友的意见中知道这一点，他说它比 phantom 更简单，但我不能向你保证它不会是一个噩梦 - 我个人没有使用它。