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.

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

kentaro-m/catchy-image

kentaro-m

Reviews

Repository Details