1

我如何将此 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)

在此处输入图像描述

4

2 回答 2

0

我发现了一个替代解决方案，因为我发现问题出在 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()
于 2021-06-17T21:57:48.907 回答
0

因此，对于 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>
'
于 2021-09-05T06:27:42.673 回答