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

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

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

我的第一种方法是将外部网站加载到iframe,但这不起作用,因为有些网页限制了这一点,例如即使是w3schools.com上的iframe教程也不起作用,我拒绝在一个框架中显示“https://www.w3schools.com/”,因为它将’X-Frame-Options’设置为’sameorigin’.

HTML


方法2
我的下一个方法是打电话给我的网络服务器,它加载目标网站并将html返回给客户端.这有效,但目标网站无法正确呈现,例如图片未加载. (见下面的截图)

HTML


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",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.如今,大量网站使用js动态生成内容.它只能由浏览器呈现,但好消息 – 有一种叫做phantomjs的东西 – 没有UI的浏览器.它可以为你做好工作,即使他们已经在他们的教程中工作了example,几年前我成功实现了javascript的小知识.
还有一个名为nightmarejs的替代图书馆 – 我知道这只是来自朋友的意见,它说它比幻影更简单,但我不会向你保证它不会是一场噩梦 – 我个人并没有使用它.
curlcurl

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

相关文章