18

I want to convert following HTML to PNG image in Python.

<html>
    <b>Bold text</b>
</html>

This HTML is, of course, an example.

I have tried 'pisa' but it converts html to PDF, not to image. I can convert HTML to PDF and then convert PDF to PNG, but I was wondering if there is any direct solution (i.e HTML to PNG). Any built-in or external module will work nicely.

If this can be done in Graphicsmagick or Imagemagick, then it will be perfect.

vsminkov
  • 10,912
  • 2
  • 38
  • 50
mannan
  • 373
  • 2
  • 4
  • 10
  • possible duplicate of [Html to image in javascript or python](http://stackoverflow.com/questions/2192799/html-to-image-in-javascript-or-python) – Zsolt Botykai Apr 12 '11 at 10:59
  • @ZsoltBotykai suggested in a now deleted answer to also see: [Python - render HTML content to GIF image](https://stackoverflow.com/q/3159367) – Makyen Aug 28 '18 at 19:22

2 Answers2

13

webkit2png. The original version is OSX-only, but luckily there is a cross-platform fork: https://github.com/AdamN/python-webkit2png

vartec
  • 131,205
  • 36
  • 218
  • 244
  • 2
    how is this used? – Newskooler Nov 01 '17 at 15:18
  • 1
    @Newskooler I was confused at first as well (because the pip installation wasn't working for me) so I wrote a [more elaborate answer](https://stackoverflow.com/a/48537053/2550406). Hope it helps you – lucidbrot Jan 31 '18 at 07:49
  • 2
    just providing an alternative here [`imgkit`](https://github.com/jarrekk/imgkit) which uses wkhtmltopdf ( [link to sample code](https://gist.github.com/pangyuteng/2af5d4ee692f05fab20e72630260e2be) tested using ubuntu :) ). – pangyuteng Dec 16 '18 at 21:15
  • This solution is probably outdated since webkit2png hasn't been maintained for years, `imgkit` did the job for me. – oeter Apr 18 '22 at 10:36
8

To expand on vartec's answer to also explain how to use it...

Install webkit2png
The easiest way is probably to simply clone the github repo and run the setup.

mkdir python-webkit2png
git clone https://github.com/adamn/python-webkit2png.git python-webkit2png
python setup.py install

This requires python and git to already be installed. For cygwin, this will add webkit2png as a command to the path. I haven't tested this for other terminals/OS.

Run it
Say you have your website in the current directory. (I had a html file that was using a css stylesheet - but there's no need to think about the css file.)

webkit2png something.html -o something.png

Options
webkit2png -h informs us:

Options:
  --version             show program's version number and exit
  -h, --help            show this help message and exit
  -x WIDTH HEIGHT, --xvfb=WIDTH HEIGHT
                        Start an 'xvfb' instance with the given desktop size.
  -g WIDTH HEIGHT, --geometry=WIDTH HEIGHT
                        Geometry of the virtual browser window (0 means
                        'autodetect') [default: (0, 0)].
  -o FILE, --output=FILE
                        Write output to FILE instead of STDOUT.
  -f FORMAT, --format=FORMAT
                        Output image format [default: png]
  --scale=WIDTH HEIGHT  Scale the image to this size
  --aspect-ratio=RATIO  One of 'ignore', 'keep', 'crop' or 'expand' [default:
                        none]
  -F FEATURE, --feature=FEATURE
                        Enable additional Webkit features ('javascript',
                        'plugins')
  -c COOKIE, --cookie=COOKIE
                        Add this cookie. Use multiple times for more cookies.
                        Specification is value of a Set-Cookie HTTP response
                        header.
  -w SECONDS, --wait=SECONDS
                        Time to wait after loading before the screenshot is
                        taken [default: 0]
  -t SECONDS, --timeout=SECONDS
                        Time before the request will be canceled [default: 0]
  -W, --window          Grab whole window instead of frame (may be required
                        for plugins)
  -T, --transparent     Render output on a transparent background (Be sure to
                        have a transparent background defined in the html)
  --style=STYLE         Change the Qt look and feel to STYLE (e.G. 'windows').
  --encoded-url         Treat URL as url-encoded
  -d DISPLAY, --display=DISPLAY
                        Connect to X server at DISPLAY.
  --debug               Show debugging information.
  --log=LOGFILE         Select the log output file

Notable options are the setting of width and height.

Troubleshooting
Using cygwin, I encountered webkit2png: cannot connect to X server :0.0. To fix this (I had already performed export DISPLAY=0.0), I had to start an X-Server. On cygwin, this can be done by running startxwin in a second terminal. Make sure to install it first via the cygwin setup.

Louie Torres
  • 28
  • 1
  • 6
lucidbrot
  • 5,378
  • 3
  • 39
  • 68
  • I have followed the steps but got some import issues. I imported the required files but i don't know how to install this module-- `ImportError: No module named QtWebKit` I imported `sudo apt install python-pyqt5.qtwebkit` but still getting the import issue. – Javed Sep 28 '18 at 12:08
  • I have just followed the given step and I am simply getting import issue. I am using ubuntu 18 – Javed Sep 28 '18 at 12:12
  • Didn't see your edit at first, that's why I removed my comment again. I do not remember having to install QtWebKit, so I'll probably be of little help. If you don't find a question specific to your problem, consider asking one. – lucidbrot Sep 28 '18 at 12:15
  • @Javed [maybe this helps](https://askubuntu.com/questions/923519/qtwebkit-on-ubuntu-17-04) – lucidbrot Sep 28 '18 at 12:18
  • Thanks, But I tried the steps given on the above link but nothing worked. – Javed Sep 28 '18 at 12:32