如何以编程方式将在线网页目标元素打印到图像中？

Question

提供在线网页：

https://stackoverflow.com/users/1974961

在该网页中给目标元素加上id="REPUTATION"（此处用红色人工填充）：

如何reputation_1974961.ext打印此元素的图像？

Answer 1

看看这个库：https://www.npmjs.com/package/html2png

通过html2png库，您可以将HTML字符串传递给其render方法，它将HTML呈现为PNG（作为其回调中的缓冲区返回）。然后，您应该能够使用标准文件I / O将缓冲区内容保存到文件中。

关于获取该元素的HTML字符串：使用request或您选择的请求库获取整个页面，然后使用诸如Cheerio之类的内容仅定位所需元素并获取其HTML。 （Cheerio：https://www.npmjs.com/package/cheerio）。

可能有些陷阱，例如您可能还需要从返回的HTML中获取一些样式并将其复制到呈现字符串中，但这应该可以帮助您找到正确的方向：）

Answer 2

不是完全使用div id，但是我可以使用imgkit并使用wkhtmltopdf选项来获得很多。您需要按照链接中所述安装imgkit和wkhtmltopdf。

给定的裁剪选项可能与您不同，因此请尝试使用它。您可以找到所有的wkhtmltopdf选项here。

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）

如您所见，这并不完美，但肯定是您可以考虑的选择之一。