catchy-image

A Node.js module for dynamically generating Open Graph images.

🎨 Example

It can create an image like this by using the module.

▶️ Usage

Executing this module requires Node v12.

Install a package using the npm CLI.

$ npm install --save catchy-image

Write codes for importing a module, setting up options for generating an image, and executing a module.

const catchy = require('catchy-image')

async function run() {
    const options = {
      output: {
        directory: '',
        fileName: 'thumbnail.png',
      },
      image: {
        width: 1200,
        height: 630,
        backgroundColor: '#222639',
        // backgroundImage: require.resolve('./images/background.jpg'),
      },
      style: {
        title: {
          fontFamily: 'Noto Sans CJK JP',
          fontColor: '#bb99ff',
          fontWeight: 'bold',
          fontSize: 64,
          paddingTop: 100,
          paddingBottom: 200,
          paddingLeft: 150,
          paddingRight: 150,
        },
        author: {
          fontFamily: 'Noto Sans CJK JP',
          fontColor: '#f0f5fa',
          fontWeight: '400',
          fontSize: 42,
        },
      },
      meta: {
        title: 'How to dynamically create  an Open Graph image.',
        author: 'Kentaro Matsushita',
      },
      fontFile: [
        {
          path: require.resolve('./fonts/NotoSansCJKjp-Bold.otf'),
          family: 'Noto Sans CJK JP',
          weight: 'bold',
        },
        {
          path: require.resolve('./fonts/NotoSansCJKjp-Regular.otf'),
          family: 'Noto Sans CJK JP',
          weight: '400',
        },
      ],
      iconFile: require.resolve('./images/avatar.jpeg'),
      timeout: 10000,
    }

    const output = await catchy.generate(options)
    console.log(`Successfully generated: ${output}`)
  } catch (error) {
    console.error(error)
  }
}

run()

⚙️ Options

Output

name	required	description
directory	true	directory path to output an image.
fileName	true	file name to output an image.

Image

name	required	description
width	true	width of a generated image.
height	true	height of a generated image.
backgroundColor	true	hex value for background color.
backgroundImage		image path using as the background (specify relative path).

Style

Title

name	required	description
fontFamily	true	font family for title text
fontColor	true	hex value for text color.
fontWeight	true	font weight for title text.
fontSize	true	font size for title text.
paddingTop	true	height of the padding area on the top of a title text.
paddingBottom	true	height of the padding area on the bottom of a title text.
paddingLeft	true	width of the padding area on the left of a title text.
paddingRight	true	width of the padding area on the right of a title text.

Author

name	required	description
fontFamily	true	font family for author text
fontColor	true	hex value for text color.
fontWeight	true	font weight for author text.
fontSize	true	font size for author text.

Meta

name	required	description
title	true	title text to be placed on the image.
author	true	author text to be placed on the image.

Font File

name	required	description
path	true	file path of font data (specify relative path).
family	true	font family name to register custom font to this module.
weight	true	font weight to register custom font to this module.

Icon File

name	required	description
iconFile	true	file path of icon to be placed on the image.

Timeout

name	required	description
timeout	true	the number of milliseconds to wait until complete the process.

👷 Development

$ npm install
# Execute an example script (src/example.js)
$ npm run build && npm run dev

Tests

$ docker build -t snapshot-test:0.1.1 .
$ docker run -v `pwd`/test:/usr/src/app/test snapshot-test:0.1.1

📝 Licence

MIT

❤️ Acknowledgments

Inspired by @shuhei's article.

Generating Twitter Card Images from Blog Post Titles - Shuhei Kagawa