The intersection of technology and leadership

Converting Code to Images

I needed to convert some code into an image for a presentation recently and found a number of different ways of doing so. The easiest, of course, is when you take a screen capture of the code in your IDE. This fails when your code goes well past the side of your screen and you still want to show it all.

Alternatively, you can do this in a two step process.

  • Save the code to HTML – I know that both IntelliJ and NetBeans allow you to do this for Java code.
  • Use webkit to save to an image – I used PhantomJS for doing this. Take a look at the example code of how to do this.

Leave a comment if you’ve had any other good experiences doing this. I’d be interested in other ways that have worked for you.

1 Comment

  1. Liz Douglass

    Hi Pat,
    Thanks for the post. I had to create multiple images recently and I found this technique really useful. I wrote a script to rasterize all the html files nested in a folder (below). The webkit.js file contains the example code you refer to in your post.

    #!/bin/bash

    DIR=`pwd`

    if [ -d “${1}” ] ; then
    cd “${1}”
    else
    echo “Error: bad argument. Expected a valid directory name for the first argument”
    echo “Bad directory name = ${1}”
    exit 1
    fi

    for i in $(find . -name *.html)
    do
    FILENAME=${i//\//-}
    OUTPUT=$DIR/${FILENAME:2}.png
    echo $OUTPUT
    URL=file://`pwd`${i:1}
    /Users/ldouglas/Tools/phantomjs-1.3.0/bin/phantomjs $DIR/webkit.js $URL $OUTPUT
    done

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2024 patkua@work

Theme by Anders NorenUp ↑