python imgkit could not render the whole page

Question

python imgkit could not render the whole page

2.1k Views Asked by Wenjing Li At 30 July 2020 at 04:18

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

**Blooky** · Answer 1 · 2021-06-17T21:57:48.907000

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

**sunnysidedown916** · Answer 2 · 2021-09-05T06:27:42.673000

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

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