python imgkit无法呈现整个页面
python imgkit无法呈现整个页面
提问于 2020-07-30 12:18:19
I如何将此HTML页面呈现为jpg：
但是wkhtmltoimage似乎只渲染了页面的一小部分。
我的代码出了什么问题？
我的代码：
import imgkit
map0 = folium.Map(location=Center,tiles='Stamen Toner',zoom_start=12)
map0.save("SVI_Map.html")
config = imgkit.config(wkhtmltoimage='C:Program Files\\wkhtmltopdf\\bin\\wkhtmltoimage.exe')
with open("SVI_Map.html") as f:
imgkit.from_file(f, 'out.jpg',config=config)
回答 2
Stack Overflow用户
发布于 2021-06-18 05:57:49
当我发现问题出在wkhtmltoimage上时，我找到了另一个解决方案，这基本上就是imgkit用来从HTML渲染图像的地方。首先，这使用了pyppeteer库，它是puppeteer的python端口。您可以使用pip安装它：
pip install pyppeteer在我的实现中，我使用了异步，因为我不希望这个进程“阻塞”我的应用程序的其他部分。
首先，请确保导入以下内容：
from folium import utilities
from pyppeteer import launch下面的代码用于呈现HTML并截取“屏幕截图”。只需复制和粘贴它，它应该可以工作。如果您对此代码还有任何疑问，请随时与我联系
html = user_map.get_root().render()
browser = await launch(headless=True)
page = await browser.newPage()
with utilities.temp_html_filepath(html) as fname:
await page.goto('file://{path}'.format(path=fname))
img_data = await page.screenshot({'fullPage': 'true', })
await browser.close()Stack Overflow用户
发布于 2021-09-05 06:27:43
因此，使用IMGKIT时，默认设置是使HTML适合文本。要解决这个问题，您可以将图像创建为“内容”，以便IMGKIT知道要呈现什么。
下面是我在HTML文件中所做的
'
<!DOCTYPE html>
<html>
<head>
<meta name="imgkit-format" content="png"/>
<meta name="imgkit-orientation" content="Landscape"/>
<style type="text/css">
@font-face {
font-family:Kavivanar;
src: 'Kavivanar.tff';
}
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
margin-right: -50%;
transform: translate(-50%, -50%);
font-size: 35px;
font-family: 'Kavivanar';
line-height: 150%;
-webkit-text-stroke: 1px black;
}
.bottom-left {
position: absolute;
bottom: 60px;
left: 100px;
width: 100%;
font-size: 35px;
font-family: 'Kavivanar';
line-height: 150%;
color #000;
}
.top-right {
position: absolute;
top: 60px;
right: 60px;
width: 100px;
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="container">
<img src="{{background_img_path}}" style="width:100%;opacity: 75%;">
<img class="top-right" src="{{logo_img}}" >
<div class="centered">
<p style="color: #FFFFFF;">
{{description}}
</p>
</div>
</div>
</body>
</html>
'页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63166130
复制相关文章
相似问题
腾讯云开发者
