python imgkit无法呈现整个页面

2024-03-29 14:43:27 发布

您现在位置:Python中文网/ 问答频道 /正文

我知道如何将此HTML页面呈现为jpg: enter image description here 但wkhtmltoimage似乎只呈现页面的一小部分。 enter image description here

我的代码怎么了

我的代码:

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)

enter image description here


Tags: 代码importconfigmaphtmllocation页面jpg
2条回答

因此,使用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>
'

当我发现问题出在wkhtmltoimage上时,我找到了另一种解决方案,这基本上就是imgkit用来从HTML渲染图像的方法。首先,它使用pyppeteer库,这是Puppeter的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()

相关问题 更多 >