python imgkit could not render the whole page

Question

python imgkit could not render the whole page

2k Views Asked by Wenjing Li At 20 October 2024 at 19:58

I what to render this HTML page into jpg: but wkhtmltoimage seems to only render the small part of the page.

what's wrong with my code?

My code:

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)

Original Q&A

There are 2 best solutions below

**sunnysidedown916** · Answer 1

So, with IMGKIT, the default is to fit the HTML with the text. To work around that, you can create the image as the "Content" so that IMGKIT knows what to render.

Here is what I did in the HTML file

'
    <!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>
'

**Blooky** · Answer 2

I found an alternative solution as I discovered the the problem is with wkhtmltoimage, which is basically what imgkit uses to render the image from the HTML. Firstly, this uses the pyppeteer library, which is a python port of puppeteer. You can install it using pip:

pip install pyppeteer

In my implementation I used async because I do not want this process to "block" other parts of my application.

Firstly make sure to import the following:

from folium import utilities
from pyppeteer import launch

This code below is used to render the HTML and take a "screenshot". Just copy and paste it, and it should work. Feel free to let me know if you have any more questions about this code

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()

python imgkit could not render the whole page

There are 2 best solutions below

Related Questions in PYTHON

Related Questions in WKHTMLTOIMAGE

Related Questions in IMGKIT

Trending Questions

Popular # Hahtags

Popular Questions