How to generate placeholder images with a simple Node script 🖼️🖌️🤖

I needed placeholder images. Like, a lot. With some custom text on them and different colors. After searching the web for a bit, I found no service that did exactly what I wanted to do, so I decided to just write a little node script myself! 😀

What it should do 🤔

I wanted to have a node script I could call via CLI that would generate a single PNG with some given parameters. I should be able to change its color, size, text, maybe font and I should be able to define where the image will end up. So I came up with some CLI parameters:

--width (-w)  # Width of the image
--height (-h) # Height of the image
--red (-r)    # Red, 0-255
--green (-g)  # Green, 0-255
--blue (-b)   # Blue, 0-255
--text (-t)   # Text, defaults to "Lorem ipsum"
--font (-f)   # The font of the text, defaults to "sans-serif"
--output (-o) # Where the image would end up, defaults to "./image.png"

That sounds like a lot of parameters, though. Luckily, there's two packages that would help handle that many parameters: command-line-args and command-ine-usage. Those were exactly what I needed. Off to the implementation!

Implementing the CLI stuff ⌨️

That was rather straight forward. I read the docs a bit and came up with this:

// generate.js

#!/usr/bin/node

const commandLineArgs = require('command-line-args')
const commandLineUsage = require('command-line-usage')
const version = require('./package.json').version

const optionDefinitions = [
  { name: 'width', alias: 'w', type: Number, defaultValue: 640, description: 'Width of the image. Default: 640' },
  { name: 'height', alias: 'h', type: Number, defaultValue: 480, description: 'Height of the image. Default: 480' },
  { name: 'red', alias: 'r', type: Number, defaultValue: 255, description: 'Red part, 0-255. Default: 255' },
  { name: 'green', alias: 'g', type: Number, defaultValue: 255, description: 'Green part, 0-255. Default: 255' },
  { name: 'blue', alias: 'b', type: Number, defaultValue: 255, description: 'Blue part, 0-255. Default: 255' },
  { name: 'text', alias: 't', type: String, defaultValue: 'Lorem ipsum', description: 'Text to put on image. Default: "Lorem ipsum"' },
  { name: 'font', alias: 'f', type: String, defaultValue: 'sans-serif', description: 'Font the text will be rendered in. Default: "sans-serif"' },
  { name: 'output', alias: 'o', type: String, defaultValue: './image.png', description: 'Path of the image. Default: "./image.png"' },
  { name: 'help', type: Boolean, defaultValue: false, description: 'Prints this help' },
  { name: 'version', alias: 'v', type: Boolean, defaultValue: false, description: 'Prints the version' },
]
const options = commandLineArgs(optionDefinitions)

if (options.version) {
  console.log(version)
  return
}

if (options.help) {
  const sections = [
    {
      header: 'Placeholder image generator',
      content: 'Create placeholder images with a single line of bash!'
    },
    {
      header: 'Arguments',
      optionList: optionDefinitions
    },
    {
      header: 'Example',
      content: './generate.js -w 100 -h 100 -r 0 -g 0 -b 255 -t "Hello, World!" -f Helvetica -o ./placeholder.png'
    }
  ]

  const usage = commandLineUsage(sections)
  console.log(usage)

  return
}

Executing ./generate.js --help would print this now:

./generate.js --help

Placeholder image generator

  Create placeholder images with a single line of bash! 

Arguments

  -w, --width number    Width of the image. Default: 640                         
  -h, --height number   Height of the image. Default: 480                        
  -r, --red number      Red part, 0-255. Default: 255                            
  -g, --green number    Green part, 0-255. Default: 255                          
  -b, --blue number     Blue part, 0-255. Default: 255                           
  -t, --text string     Text to put on image. Default: "Lorem ipsum"             
  -f, --font string     Font the text will be rendered in. Default: "sans-serif" 
  -o, --output string   Path of the image. Default: "./image.png"                
  --help                Prints this help                                         
  -v, --version         Prints the version                                       

Example

  ./generate.js -w 100 -h 100 -r 0 -g 0 -b 255 -t "Hello, World!" -f Helvetica  
  -o ./placeholder.png    

Amazing, that was exactly what I wanted!

Actually generating the image 🎨

With all these parameters, I would be able to actually generate a placeholder image. Since the text should be readable on whatever color the user specifies, the color of the text would need to be "the opposite" of the background color. Also, I needed the colors as hex strings, not RGB. So I created these two functions:

/**
 * Transforms R, G and B into a hex color string.
 * @param r
 * @param g
 * @param b
 * @returns {string}
 */
const colorToHex = (r, g, b) => '#' +
  (r.toString(16).padStart(2, '0')) +
  (g.toString(16).padStart(2, '0')) +
  (b.toString(16).padStart(2, '0'))

/**
 * Inverts a color and returns its hex value
 * @param r
 * @param g
 * @param b
 * @returns {string}
 */
const invertColor = (r, g, b) => colorToHex(
  (255 - r),
  (255 - g),
  (255 - b)
)

Now I used the canvas package to create an image:

const width = options.width
const height = options.height
const color = colorToHex(options.red, options.green, options.blue)
const textColor = invertColor(options.red, options.green, options.blue)

const canvas = createCanvas(width, height)
const context = canvas.getContext('2d')

context.fillStyle = color
context.fillRect(0, 0, width, height)
context.fillStyle = textColor
// height / 10 scales the font so it always looks nice!
context.font = `${height / 10}px ${options.font}`

const textSize = context.measureText(options.text)

context.fillText(options.text , (canvas.width / 2) - (textSize.width / 2), (canvas.height / 2))

... and used fs to write the image to the harddisk:

const buffer = canvas.toBuffer('image/png')
fs.writeFileSync(options.output, buffer)

Awesome! A little test showed that the images were generated correctly.

Adding some convenience 🛋️

Almost done. Because I had an idea: why not also make the script open the image in the user's default application? process.platform and Node's exec allowed me to do just this:

if (options.open) {
  let command = 'xdg-open' // Linux
  if (process.platform === 'win32') { // Windows
    command = 'start'
  }

  if (process.platform === 'darwin') { // OSX
    command = 'open'
  }

  exec(`${command} ${options.output}`)
}

And that's it: A CLI tool to create an image of a configured size with configured color and a text that scales automatically!

Wait, why the #showdev tag? 😯

Because I made it open source! 🚀 You can find it on GitHub (thormeier/generate-placeholder-image) and npm (generate-placeholder-image)

---

I hope you enjoyed reading this article as much as I enjoyed writing it! If so, leave a ❤️ or a 🦄! I write tech articles in my free time and like to drink coffee every once in a while.

If you want to support my efforts, please consider buying me a coffee ☕ or follow me on Twitter 🐦!