Screenshot a Webpage via Command Line Script

We've recently had a requirement on one of our projects to periodically take a screenshot of an external URL every few minutes and cache the image on our server, which acts as an intermediary to a set of dedicated clients. Here are a few notes on how we made this work:

  • The external URL generated a dynamic map using javascript, css and canvas elements. 
  • To take a screenshot of this on our headless server, we used wkhtmltoimage, which is part of the wkhtmltopdf package.
  • This can be installed using the following recipe:
    • First, check the link for latest version and select either 32bit or 64bit for your machine. If you're not sure what architecture your server is, use the command "file /sbin/init" -- the output should give you all the information you need
    • Then:
      • wget http://wkhtmltopdf.googlecode.com/files/wkhtmltoimage-0.11.0_rc1-static-i386.tar.bz2
      • tar xvjf ./wkhtmltoimage-0.11.0_rc1-static-i386.tar.bz2
      • chown www-data:www-data ./wkhtmltoimage-i386
      • chmod +x ./wkhtmltoimage-i386
      • mv ./wkhtmltoimage-i386 /usr/bin/wkhtmltoimage
  • For some websites, this is all you'll need. You can test this on the command-line via:
    • wkhtmltoimage -f png --quality 83 --javascript-delay 500  http://google.com /tmp/google.png
  • Command line parameters are documented here ,
  • Inspect the image to see if it looks as you expected. The javascript-delay parameter tells wkhtmltoimage to wait X milliseconds before taking a screenshot, giving the internal webkit renderer enough change to execute the script. You may need to extend this depending on the site in question.
  • In our case, using this command did not render the dynamic canvas elements correctly, and it generated a bunch of warnings such as:
    • QPixmap: Cannot create a QPixmap when no GUI is being used
  • To solve these, we had to install xvfb (sudo apt-get install xvfb or yum install xvfb)
    • Xvfb is a virtual X11 Server that renders everything to a virtual screen in-memory, which is used by wkhtmltoimage for some elements
  • Once installed, you can use it using the following command:
    • xvfb-run --server-args="-screen 0, 1024x680x24" wkhtmltoimage --use-xserver -f png --quality 83 --javascript-delay 500  http://google.com /tmp/google.png
  • You can then integrate this into any php or python web-app or for whatever else you may need it

Comments

  1. Very good tutorial. It works! Even with Flash sites if Flash is installed into the Mozilla/plugins/ folder as described here: http://code.google.com/p/wkhtmltopdf/issues/detail?id=597

    /Mike

    ReplyDelete
  2. Works great! thank you.
    without xvfb, I had an error as you mentioned above
    "QPixmap: Cannot create a QPixmap when no GUI is being used"
    But with xvfb, it does a great job.

    ReplyDelete
  3. Thanks for that tip, I didnt know xvfb-run was needed, and I was obtaining segmentation faults because of that.

    ReplyDelete
  4. Useful tutorial. I've got it done on my CentOs. Many thank to you.

    ReplyDelete
  5. awesome! thank you so much!

    ReplyDelete
  6. Really helpful
    Thanks

    ReplyDelete
  7. does not work for me, no warn, no output image

    ReplyDelete

Post a Comment

Popular posts from this blog

Wkhtmltopdf font and sizing issues

Import Google Contacts to Nokia PC Suite

Can't delete last blank page from Word