Automate Your Meta Images with Node.js

Why Bother with Meta Images?

Manually creating meta images for each blog post can be a tedious task. It takes time to find the right icon, choose a color scheme, export the image, and add it to your project. But, having a decent-looking image can make a huge difference in how your content is perceived on social media and in post lists. Plus, links with images are more likely to get clicked by users.

Getting Started with Node.js and Canvas

Create a new JavaScript project and install the necessary dependencies, including node-canvas. Create a new file called draw.js and add the following script:

console.log('hello world');

Update your package.json file to include a draw script that runs node draw.js. Run the script, and you should see “hello world” printed on your terminal window.

Generating a Blank Canvas

Update your draw.js file to generate a purple rectangle and save it to a file called image.png in the root of your project:

const { createCanvas, loadImage } = require('canvas');
const canvas = createCanvas(1200, 630);
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#7A288A'; // Purple color
ctx.fillRect(0, 0, 1200, 630);

const fs = require('fs');
const out = fs.createWriteStream(__dirname + '/image.png');
const stream = canvas.createPNGStream();
stream.pipe(out);
out.on('finish', () => {
  console.log('Image saved!');
});

Run the script again, and you should see a blank purple rectangle.

Adding Post Title and Author

Introduce some content by adding a post object to the top of the file:

const post = {
  title: 'Example Post',
  author: 'John Doe',
};

Render the title on the image, making sure to wrap the text to avoid it bleeding over the edge of the canvas. Create a new helper file utils/format-title.js to handle the text wrapping logic:

// utils/format-title.js
function formatTitle(title, maxWidth) {
  const words = title.split(' ');
  const lines = [];
  let currentLine = '';

  for (let i = 0; i < words.length; i++) {
    if (currentLine.length + words[i].length > maxWidth) {
      lines.push(currentLine);
      currentLine = '';
    }
    currentLine += words[i] + ';
  }

  lines.push(currentLine.trim());

  return lines.join('\n');
}

module.exports = formatTitle;

Use the formatTitle function to render the title on the image:

const formatTitle = require('./utils/format-title');

ctx.font = 'bold 48px Arial';
ctx.fillStyle = '#FFFFFF'; // White color
ctx.textAlign = 'left';
ctx.textBaseline = 'top';

const titleLines = formatTitle(post.title, 900);
titleLines.forEach((line, i) => {
  ctx.fillText(line, 50, 50 + i * 60);
});

Adding a Logo Image

Add a logo to assets/logo.png and update the code to render it on the image:

loadImage(__dirname + '/assets/logo.png').then((image) => {
  ctx.drawImage(image, 50, 50, 100, 100); // Adjust size and position as needed
}).catch((err) => {
  console.error(err);
});

Putting it All Together

Run the script again, and you should see a complete meta image with a title, author, and logo. Experiment with different title lengths and logo sizes to see how the image adapts.

Taking it Further

This is just the beginning. You can use this foundation to generate meta images for multiple posts, read post data from a directory of files, and even integrate it with your production workflow. The possibilities are endless!

• Generate meta images for multiple posts
• Read post data from a directory of files
• Integrate with your production workflow