17

Here is a variable html_str, it is a string that contains html tags and contents in body. I am created a .html file from this string using the below code in python.

html_file = open("filename.html", "w")
html_file.write(html_str)
html_file.close()

now i got html file named file "filename.html". Now i want to convert that "filename.html" to a image, named filename.jpg with the exact contents of the html file. please help me.

Manu __
  • 173
  • 1
  • 1
  • 4
  • Does this answer your question? [Render HTML to an image](https://stackoverflow.com/questions/10721884/render-html-to-an-image) – Thomas Schillaci Mar 09 '20 at 10:42
  • @ThomasSchillaci Actually i want to do it using python, like i created the .html file from the string. i want to apply other operations like cropping to the image file after converting the html file to image. – Manu __ Mar 09 '20 at 10:46

5 Answers5

27

You can do this by using imgkit

import imgkit

imgkit.from_file('test.html', 'out.jpg')

Or you can also use htmlcsstoimage Api

# pip3 install requests
import requests

HCTI_API_ENDPOINT = "https://hcti.io/v1/image"
HCTI_API_USER_ID = 'your-user-id'
HCTI_API_KEY = 'your-api-key'

data = { 'html': "<div class='box'>Hello, world!</div>",
         'css': ".box { color: white; background-color: #0f79b9; padding: 10px; font-family: Roboto }",
         'google_fonts': "Roboto" }

image = requests.post(url = HCTI_API_ENDPOINT, data = data, auth=(HCTI_API_USER_ID, HCTI_API_KEY))

print("Your image URL is: %s"%image.json()['url'])
# https://hcti.io/v1/image/7ed741b8-f012-431e-8282-7eedb9910b32
Mohit Chandel
  • 1,563
  • 8
  • 22
  • 1
    Thanks for your answer. By using the method you described above i got the image version of the html file. But the images in the html file is missing in the .jpg file. – Manu __ Mar 09 '20 at 10:50
  • 1
    @Manu__ add ` ` in your html string and then try – Mohit Chandel Mar 09 '20 at 10:53
  • In your second method we have to specify the data, right? in my case the data will be a user input so it can vary. This method is not useful in my case. First method is okay. But the converted file, ie, ".jpg" file is missing the images in the html file, please give a solution for that. thanks – Manu __ Mar 09 '20 at 10:54
  • copied and added it in html string. But the result is still same. – Manu __ Mar 09 '20 at 11:03
  • yes, the image path is correct and i can open the image file. Okay let me check the solution you provided. – Manu __ Mar 09 '20 at 11:13
  • sorry i've deleted my previous comment by mistake [prev-sol](https://dev.to/nodefiend/images-not-showing-up-using-pdfkit-and-wkhtmltopdf-44e8) but you can try this question as well [ques](https://stackoverflow.com/questions/16627310/wkhtmltopdf-not-loading-local-css-and-images) – Mohit Chandel Mar 09 '20 at 11:14
  • Hi, I think i accidently deleted your first link of the solution, will you please add that too – Manu __ Mar 09 '20 at 11:16
  • The link is there! – Mohit Chandel Mar 09 '20 at 11:54
  • hi sir. i am trying to capture a screenshot from a embeded html (twitter tweets) with imgkit. but the module does not do it right. i guess it dont load the js. its fine when i open it with browser. this is the link to my question [link](https://stackoverflow.com/questions/68841037/imgkit-wkhtml2image-cant-load-javascript). help me please – HadiH2o Aug 20 '21 at 18:13
  • Does any of the above solutions support full page screenshot? For example, if the page is very long, can any of the above mentioned tools scroll down and capture the entire screen in a single image file? – Dino Mar 18 '22 at 10:12
5

Another very useful tool to render HTML sites is the headless Chromium browser.

In javascript you would use the puppeteer api to interact with it but there is a unofficial python port of puppeteer called pyppeteer

From my experience with python tools like imgkit the Chromium solution is far more reliable when it comes to loading in external assets like images or iFrames.

To get an image version of the rendered HTML using pyppeteer you simply load the page and then make a full page screenshot:

import asyncio
from pyppeteer import launch

async def main():
    browser = await launch()
    page = await browser.newPage()
    await page.goto('http://example.com')
    await page.screenshot({'path': 'example.png', 'fullPage': 'true'})
    await browser.close()

asyncio.get_event_loop().run_until_complete(main())
Mercury
  • 613
  • 1
  • 8
  • 25
3

If you don't want your project to depend on wkhtmltopdf, like other Python modules use, I recommend html2image.

from html2image import Html2Image
hti = Html2Image()
hti.screenshot(url='https://www.python.org', save_as='python_org.png')
ajskateboarder
  • 45
  • 2
  • 7
  • 2
    Html2Image is indeed a wrapper around Chrome/Chromium, and has the advantage of generating images that are (most of the time) perfect replicas of what you can see in your own browser, which is not always the case using wkhtmltopdf. As the author of this package, thanks for recommending it, I hope to add support for additional browsers/tools in the future. – vgalin Feb 03 '22 at 15:21
2
from html2image import Html2Image
hti = Html2Image()
with open('./test.html') as f:
    hti.screenshot(f.read(), save_as='out.png')
Birkan
  • 75
  • 1
  • 9
  • While this code may answer the question, consider sharing a link to the library and some explanation of features or why you suggest it over others. See, the quite identical [answer from ajskateboarder](https://stackoverflow.com/a/70910798/5730279) was duplicated. – hc_dev Apr 22 '22 at 16:56
0

check out HtmlWebShot

# pip install htmlwebshot

from htmlwebshot import WebShot
shot = WebShot()
shot.quality = 100

image = shot.create_pic(html="file.html")
Super R
  • 9
  • 1