Сделать скриншот с внешнего сайта - PullRequest
Новая
       12

Сделать скриншот с внешнего сайта

0 голосов
/ 07 мая 2018

Я разрабатываю стартовую страницу, где пользователи могут добавлять ссылки на страницу, используя формуляры. Они могут добавить имя , URL , описание и загрузить изображение .

Я хочу автоматизировать процесс загрузки изображения, изображение должно быть снято автоматически. Мой скрипт должен делать скриншот сайта, который пользователь ввел в url . Я знаю, что могу сделать скриншоты html-элементов, используя html2canvas .

Подход 1

Мой первый подход состоял в том, чтобы загрузить внешний веб-сайт в iframe, но это не работает, потому что некоторые страницы ограничивают это, например. даже учебник iframe на w3schools.com не работает, и я получаю 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 клиенту. Это работает, но целевой сайт не отображается должным образом, например, изображения не загружаются. (см. скриншот ниже)

Google

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

Результат

enter image description here

Результат Холст

enter image description here

Ответы [ 3 ]

0 голосов
/ 07 мая 2018

Возможно, но если вам нужен скриншот, вам нужен браузер, который отображает страницу для вас. Подход 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 .., all. Так же, как браузер.

0 голосов
/ 07 мая 2018

Мне нравится 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 &");

Цель здесь - сгенерировать файл js из php.

Результат в файле с именем out.png в той же папке. Это скриншот страницы в полный рост.

Пример вывода

Из браузера javascript и html2canvas результаты не идеальны, но в основном на модном адаптивном веб-сайте.

Мы также можем делать хорошие снимки с помощью Firefox из командной строки. Это все равно требует X. 

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

Пример вывода

0 голосов
/ 07 мая 2018

Не в чистом php. В настоящее время большая часть сайтов генерирует контент динамически с помощью js. Это может быть сделано только браузерами, но хорошие новости - есть нечто, называемое phantomjs - браузер без пользовательского интерфейса. Он может сделать работу для Вас, даже если у них есть пример в своих уроках, которые я успешно реализовал несколько лет назад с небольшим знанием javascript. Есть альтернативная библиотека под названием nightmarejs - я знаю это только по мнению друзей, которые говорят, что это проще, чем фантом, но я не гарантирую вам, что это не будет кошмар - лично я не имел не используй его.

...