Я хотел бы преобразовать отдельные элементы HTML в PNG с помощью Phantom.JS. Кто-нибудь знает возможно ли это? Кроме того, как мне использовать Phantom.js для отображения страницы, на которую уже смотрит пользователь?
Как отобразить часть страницы с помощью PhantomJS?
Ответы (5)
Чтобы отобразить только часть страницы, вам нужно установить атрибут clipRect для страницы, а затем отобразить ее.
var clipRect = document.querySelector(selector).getBoundingClientRect();
page.clipRect = {
top: clipRect.top,
left: clipRect.left,
width: clipRect.width,
height: clipRect.height
};
page.render('capture.png');
Я не понимаю вторую часть вашего вопроса. Phantom.js является безголовым, что означает, что на самом деле нет дисплея, на который смотрит пользователь.
person
jasonlfunk
schedule
11.08.2012
Я понимаю, что phantom.js безголовый. В частности, мне нужна его способность захватывать веб-страницу из того, что видно в окне просмотра браузера. Вы знаете способ сделать это?
- person Dany Joumaa; 12.08.2012
Хорошо, я понимаю, что ты имеешь в виду. Я точно не знаю, работает ли PhantomJS таким образом или нет. Я не знаю, есть ли у Phantom понятие области просмотра или что-то в этом роде.
- person jasonlfunk; 13.08.2012
Я понимаю. Я ищу какую-то структуру, которая делает это или какую-то функцию внутри API-интерфейса расширения Chrome, которая позволяет мне это делать. Если у вас есть какие-либо указатели, я был бы очень признателен.
- person Dany Joumaa; 13.08.2012
Что именно вы пытаетесь сделать? Есть ли какой-нибудь javascript, который прокручивается вниз, который вы пытаетесь протестировать? Если вы пытаетесь имитировать взаимодействие с пользователем, то вы можете использовать подход, упомянутый выше, для визуализации любой части страницы и имитации прокрутки путем настройки атрибута
top
.
- person jasonlfunk; 14.08.2012
Я пытаюсь захватить каждый элемент HTML на странице и экспортировать PNG для целей отладки. Единственные известные мне API позволяют мне делать скриншот области просмотра браузера, но не поддерживают захват отдельных элементов или конкретных прямоугольников.
- person Dany Joumaa; 14.08.2012
О, я понимаю. Вы ищете реализацию этого браузера, а не безголовый вариант на стороне сервера.
- person jasonlfunk; 14.08.2012
Мне жаль. Я ничего не знаю.
- person jasonlfunk; 14.08.2012
Приведенный выше пример нуждался в
var clipRect = page.evaluate(function () { return document.querySelector("#someid").getBoundingClientRect(); });
, когда я пытался. Функция оценки оценивает документ в контексте страницы.
- person unhammer; 11.09.2012
Если я заранее знаю размер изображения, которое я пытаюсь захватить, даже если я установлю для clipRect значение
{top: 0, left: 0, width: 300, height: 250}
, PhantomJS отобразит большее изображение (избыток — просто черный #000 пикселей). Что дает? Существует ли минимальный размер изображения, который может отображать PhantomJS?
- person bigp; 29.09.2016
^ (продолжить) используется экспорт в JPEG. ПНГ вроде нормально.
- person bigp; 29.09.2016
Рабочий пример.
var page = require('webpage').create();
page.open('http://google.com', function() {
// being the actual size of the headless browser
page.viewportSize = { width: 1440, height: 900 };
var clipRect = page.evaluate(function(){
return document.querySelector('#hplogo').getBoundingClientRect();
});
page.clipRect = {
top: clipRect.top,
left: clipRect.left,
width: clipRect.width,
height: clipRect.height
};
page.render('google.png');
phantom.exit();
});
person
mgrachev
schedule
10.07.2015
Вы можете использовать CasperJS, еще один проект, основанный на PhantomJS.
casper.start('http://www.weather.com/', function() {
this.captureSelector('weather.png', '#wx-main');
});
casper.run();
person
Silvio Lucena Junior
schedule
08.05.2014
Решение ниже работает для меня.
var clipRect = document.querySelector(selector).getBoundingClientRect();
page.clipRect = {
top: clipRect.top,
left: clipRect.left,
width: clipRect.width,
height: clipRect.height
};
page.render('capture.png');
Но я заметил, что это работает, только если мы визуализируем изображение, а не PDF. Чтобы обойти это для pdf, попробуйте это
page.evaluate(function (element){
$(element).appendTo('body');
$('body > :not(' + element + ')').hide();
}, element);
});
window.setTimeout(function(){
page.render("page.pdf");
},1000);
Эти ссылки могут помочь: Как скрыть все элементы, кроме одного, с помощью jquery ?
https://github.com/ariya/phantomjs/issues/10465
person
onlyme
schedule
27.04.2016
У меня была такая же потребность, я попробовал это, и у меня это сработало:
не забудьте http://www
в URL
var page = require('webpage').create();
page.open('YourPageURL', function (status) {
if (status !== 'success') {
console.log('Network Problem');
} else {
var p = page.evaluate(function () {
return document.getElementById('yourDivID').innerHTML
});
console.log(p);
}
phantom.exit();
});
person
ZinebM
schedule
19.03.2013
Проголосовал против, потому что это фактически не сохраняет скриншоты отдельных элементов HTML в PNG, как указано в вопросе. Он просто выводит внутренний HTML-код некоторого элемента на консоль.
- person Val Redchenko; 05.06.2013