Как напечатать целевой элемент интернет-страницы в изображение программно?

Question

При наличии интернет-страницы:

https://stackoverflow.com/users/1974961

Учитывая целевой элемент с id="REPUTATION" (здесь искусственно обведен красным) на этой веб-странице:

Как распечатать на изображении reputation_1974961.ext этот элемент?

Answer 1

Не совсем, используя div id, но я смог получить это, используя imgkit и поигравшись с параметрами wkhtmltopdf. Вам необходимо установить imgkit и wkhtmltopdf, как указано в ссылке.

Указанные параметры обрезки могут отличаться для вас, так что поиграйте с этим. Вы можете найти все опции wkhtmltopdf здесь .

import imgkit
options = {
    'crop-h': '300',
    'crop-w': '400',
    'crop-x': '100',
    'crop-y': '430'
}

imgkit.from_url('https://stackoverflow.com/users/1974961/hugolpz?tab=questions', 'out.jpg',options=options)

Вывод (out.jpg)

Это не идеально, как вы можете видеть, но, безусловно, это один из вариантов, которые вы можете рассмотреть.

Answer 2

Посмотрите на эту библиотеку: https://www.npmjs.com/package/html2png

Библиотека html2png позволяет передать строку HTML ее методу render и отобразит HTML в PNG (возвращенный в качестве буфера при обратном вызове). После этого вы сможете сохранить содержимое буфера в файл, используя стандартный файловый ввод / вывод.

Что касается захвата HTML-строки только этого элемента: захватите полную страницу с помощью request или выбранной вами библиотеки запросов, а затем используйте что-то вроде Cheerio для нацеливания только на нужный элемент и получения его HTML. (Cheerio: https://www.npmjs.com/package/cheerio).

Могут быть некоторые ошибки, например, вам может понадобиться также извлечь некоторые стили из возвращенного HTML и скопировать их в строку рендеринга, но это должно помочь вам найти правильное направление:)