twitter-card-image

node-twitter-card-image

A small library that creates Twitter card images using node-canvas. It uses tinypng API to optimize the image if you provide an API key

Install

npm install twitter-card-image --save-dev

Quick Example

Creates a twitter card image, 1280x669, using a template image. Renders two texts using the Robot font. The top border is rendered with a gradient.

const makeCard = require('twitter-card-image');

makeCard({
    width: 1280,
    height: 669,
    tinypngApiKey: '',
    output: './card.png',
    templateImage: './twitter-card-template.png',
    fonts: [
        {
            file: 'Roboto-Bold.ttf',
            family: 'Roboto'
        }
    ],
    texts: [
        {
            text: 'Will Grizzly Bears Survive Being Hunted?',
            font: '64px "Roboto"',
            x: 500,
            y: 669 / 2,
            color: '#222',
            maxWidth: 700,
            lineHeight: 64
        },
        {
            text: 'savethebear.com',
            font: '26pt "Roboto"',
            x: 'center',
            y: 669 - 36,
            color: '#444',
        }
    ],
    backgroundColor: '#fff',
    borderTop: {       
        gradient: [
            {
                color: '#e66465',
                stop: 0
            },
            {
                color: '#9198e5',
                stop: 50
            },
        ],
        width: 20
    }  
});

Options

The following options are available:

width

The image width. Default 1280.

width: 1280

height

The image height. Default 669.

height: 669

tinypngApiKey

Your Tinypng API Key. You can get one for free here. Use this if you want to compress your images. Highly recommended.

output

The image name. Default test.jpeg It must include the extension: .png, .jpg or .jpeg.

output: './awesome.png'

backgroundColor

The backround color to use. It will fill the entire image. All HTML color values are accepted.

backgroundColor: '#444'

templateImage

The path to the image to use as a template. Default none. This should be the static part on all cards, like logo, patterns, etc. It will be drawn from the top left position of the image.

templateImage: './twitter-card-template.png'

Example:

fonts

The fonts to use for the texts rendered on the card. Each font file must available locally on the machine.

For each font you specify the file and the family. The family you'll set later for texts.

Example:

fonts: [
    file: 'Roboto-Bold.ttf',
    family: 'Roboto'
]

texts

The texts to render on card. For each text entry the following parameters can be set:

• text: string, the actual text to render e.g. 'Hello,world!'
• font: string, the font size and family. e.g. '30pt "Open Sans"'
• x: horizontal start drawing position as number or spacial value 'center' (to put in on the horizontal middle on the image)
• y: vertical start drawing position as number or spacial value 'center' (to put in on the vertical middle on the image)
• maxWidth: the text maximum width, number. If the text si bigger it will be split and rendered on multiple lines.
• lineHeight: the text line height, number.

Example:

texts: [
    {
        text: 'Will Grizzly Bears Survive Being Hunted?',
        font: '64px "Roboto"',
        x: 500,
        y: 669 / 2,
        color: '#222',
        maxWidth: 700,
        lineHeight: 64
    },
    {
        text: 'savethebear.com',
        font: '26pt "Roboto"',
        x: 'center',
        y: 669 - 36,
        color: '#444',
    }
],

borderTop

The settings for the top border. You can provide either a color or a gradient and a width. It is rendered before all other borders.

borderTop: {
    color: '#ffc100',   
    width: 20
}  

Or using a gradient:

borderTop: {  
    gradient: [
        {
            color: '#e66465',
            stop: 0
        },
        {
            color: '#9198e5',
            stop: 50
        },
    ],
    width: 20
}  

borderRight

The settings for the right border. You can provide either a color or a gradient and a width. It is rendered after the top border but before the other borders, so it renders over the top border.

borderBottom

The settings for the bottom border. You can provide either a color or a gradient and a width. It is rendered after the top and right border but before the left border, so it renders over the right border.

borderLeft

The settings for the left border. You can provide either a color or a gradient and a width. It is rendered after all other borders, so it renders over the top and bottom borders.

roundedBorder

To render a rounded-corners border use this option with the following parameters:

• color or gradient.
• radius: the rounder-corner radius, number
• width: the border width, number.

roundedBorder: {
    color: 'red',
    gradient: [
        {
            color: '#e66465',
            stop: 0
        },
        {
            color: '#9198e5',
            stop: 50
        },
    ],
    radius: 20,
    width: 30
}