Skip to content
🎨 A npm package for generating Open Graph images like Twitter Cards.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
src
.gitignore
.prettierrc.yaml
LICENSE Create LICENSE Jan 11, 2020
README.md
og-image.png Add support to register multiple fonts Jan 12, 2020
package-lock.json Add implementation to return the file path of the generated image Jan 12, 2020
package.json

README.md

Generate Open Graph Image

A npm package for generating Open Graph images like Twitter Cards.

This package is under development.

🎨 Example

An image generated from this package.

An Open Graph image

▶️ Usage

Execute this package requires Node v12.

Install a package using the npm CLI. I have not published this package on npm yet. You can install it from GitHub instead.

$ npm install --save kentaro-m/generate-og-image

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

const generateOpenGraphImage = require('generate-og-image')

const options = {
  image: {
    width: 1200,
    height: 630,
    backgroundColor: '#15202B',
    backgroundImage: require.resolve('./images/background.jpg'),
    outputFileName: 'og-image.png',
  },
  style: {
    title: {
      fontFamily: 'Noto Sans CJK JP',
      fontColor: '#1DA1F2',
      fontWeight: 'bold',
      fontSize: 64,
      paddingTop: 100,
      paddingBottom: 200,
      paddingLeft: 150,
      paddingRight: 150,
    },
    author: {
      fontFamily: 'Noto Sans CJK JP',
      fontColor: '#DDDDDD',
      fontWeight: '400',
      fontSize: 42,
    },
  },
  meta: {
    title: '怠惰なエンジニアのためのポートフォリオサイト構築術',
    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,
}

(async () => {
  try {
    // Return an image file path (e.g. og-image.png)
    const output = await generateOpenGraphImage(options)
  } catch (error) {
    // Add an error handling
  }
})()

👷 Development

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

📝 Licence

MIT

❤️ Acknowledgments

Inspired by @shuhei's article.

Generating Twitter Card Images from Blog Post Titles - Shuhei Kagawa

You can’t perform that action at this time.