Skip to content

🎨 A Node.js module for dynamically generating social cards (open graph images).

License

Notifications You must be signed in to change notification settings

kentaro-m/catchy-image

Repository files navigation

catchy-image

npm node npm GitHub license

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

🎨 Example

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

An Open Graph image

▶️ 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