Generating Text Title Images

Using a Ruby script and PhantomJS

In my last article, I grouped my Facebook photos during my internship by week: each week has its own photo album.

Since I might visit several places in a single week, I want to put a “title image” to separate between the photos of different places or different date on the same week.

In the end, it looks like this:

Generating the First Image

  • A title, which is the date in yellow;
  • A subtitle, which is the big white text; and
  • Some more text.

It can be generated using HTML and CSS by using PhantomJS to render the HTML file into the image.

Here is the corresponding HTML and CSS:

https://gist.github.com/4cbcaea315dff8bf5fb4

We can then run PhantomJS’s “rasterize.js” to turn it into an image.

If you have installed PhantomJS using Homebrew, the examples will probably be installed for you, and you can turn the HTML into the image with this command:

phantomjs /usr/local/share/phantomjs/examples/rasterize.js title_image.html title_image.png

Now, the Ruby Script

  1. Generates the HTML code.
  2. Puts that code into rasterize.js to generate an image, and name the file appropriately.

It turns out that we can open a Data URI with PhantomJS, so we don’t need to create any intermediate files; we can just encode the HTML file as data URI and send it to rasterize.js.

The Template

https://gist.github.com/dtinth/ee452a1451b4328634fb#file-title-template-html-erb

The Script

ruby title.rb "July 8" Subtitle "First Line" "Second Line" "Third Line" 5

and have it save the image into image05.cover.png.

So here is the Ruby script to accomplish that, in 11 lines.

https://gist.github.com/dtinth/ee452a1451b4328634fb#file-title-rb

And that’s it. Now I can generate title images for my album with ease.

Further Thoughts…

I’d like to elaborate on why I chose to write the script in Ruby instead of just using JavaScript or CoffeeScript in the first place.

  • Ruby makes it very easy to unpack the ARGV. Note that in CoffeeScript, you can also accomplish the same thing with `[title, subtitle, text…, imageNumber] = phantom.args`.
  • In JavaScript and CoffeeScript, I know of no built-in way to pad a number with zeros, while in Ruby you can just `“%02d” % [x]`.
  • I am not familiar with PhantomJS’ API, but I know how to use its rasterize.js.

With these 3 thoughts, I decided to write the script in Ruby.

Code, Applied to Life

Stories about how coding can be applied to solve everyday…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store