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 = { 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 family: 'Noto Sans CJK JP' weight: 'bold' path: require family: 'Noto Sans CJK JP' weight: '400' iconFile: require timeout: 10000 const output = await catchy console } catch error console }
⚙️ 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