I share my blog posts on Twitter, and there’s been a time when I entertained myself drawing drawing an image for each blog post.
I set up Hugo so it uses an image named banner.png
or banner.jpg
stored in the post folder to be used as the Open Graph image, like this:
<meta property="og:image" content="https://flaviocopes.com/axios/banner.png" />
If a post has no image, I show my avatar instead:
<meta property="og:image" content="https://flaviocopes.com/img/avatar.png" />
There’s a problem: I stopped making those custom banner images a long time ago, and most of my posts don’t have a banner.
They all look the same on Twitter:
There’s no way I can make like 500 banner images at hand. I’ve had this thought of programmatically generating them since I saw Indie Hackers generating those images for forum blog posts (a great idea):
So after stumbling upon a nice inspiration for a banner image, I decided to make a custom banner for each of my blog posts.
The banner is a PNG image, and to keep the post focused on the subject (“how to create and save an image with Node.js and Canvas”) I’ll skip some parts.
Also, there are many different ways of doing what I did, here’s just one way.
First of all, what npm packages do we need?
Just one! canvas
:
npm install canvas
This package provides us a Node.js based implementation of the Canvas API that we know and love in the browser.
In other words, everything I use to generate images also works in the browser.
Except instead of getting a Canvas instance from a <canvas>
HTML element, I load the library, get the function createCanvas
out of it:
const { createCanvas } = require('canvas')
Then I call this function passing the canvas width and height, which I set to 1200x600:
const width = 1200
const height = 600
const canvas = createCanvas(width, height)
const context = canvas.getContext('2d')
Let’s paint it black (casually dropping a Rolling Stones reference):
context.fillStyle = '#fff'
context.fillRect(0, 0, width, height)
Let’s now switch to adding text.
I first pick the Menlo font, big and bold. I align it in the center, then I set the color white.
Finally I call context.fillText()
to draw the text on the canvas:
const text = 'Hello, World!'
context.font = 'bold 70pt Menlo'
context.textAlign = 'center'
context.fillStyle = '#fff'
context.fillText(text, 600, 170)
Let’s draw a blue box behind the text:
const text = 'Hello, World!'
context.textBaseline = 'top'
context.fillStyle = '#3574d4'
const textWidth = context.measureText(text).width
context.fillRect(600 - textWidth / 2 - 10, 170 - 5, textWidth + 20, 120)
context.fillStyle = '#fff'
context.fillText(text, 600, 170)
We set the textBaseline
property to be top
to ease the positioning of the rectangle. Then I check how ling the text is, using measureText()
, and I draw it using the same coordinates we used to draw the text.
Make sure you draw the rectangle before the text, because in Canvas you draw things one on top of each other, in order:
Cool! Now I want to show my website URL at the bottom:
context.fillStyle = '#fff'
context.font = 'bold 30pt Menlo'
context.fillText('flaviocopes.com', 600, 530)
And I also want to add my logo. To do this, let’s import the loadImage
function from the canvas
module:
const { createCanvas, loadImage } = require('canvas')
and we call it specifying the logo.png
image contained in the same folder where we run the script:
loadImage('./logo.png').then(image => {
})
Once the promise is resolved, we have the image object and we can draw it to the canvas using drawImage()
:
loadImage('./logo.png').then(image => {
context.drawImage(image, 340, 515, 70, 70)
})
That’s it! Now we can save the image to an image.png
file using the toBuffer()
method:
const buffer = canvas.toBuffer('image/png')
fs.writeFileSync('./image.png', buffer)
Here is the full code:
const fs = require('fs')
const { createCanvas, loadImage } = require('canvas')
const width = 1200
const height = 630
const canvas = createCanvas(width, height)
const context = canvas.getContext('2d')
context.fillStyle = '#000'
context.fillRect(0, 0, width, height)
context.font = 'bold 70pt Menlo'
context.textAlign = 'center'
context.textBaseline = 'top'
context.fillStyle = '#3574d4'
const text = 'Hello, World!'
const textWidth = context.measureText(text).width
context.fillRect(600 - textWidth / 2 - 10, 170 - 5, textWidth + 20, 120)
context.fillStyle = '#fff'
context.fillText(text, 600, 170)
context.fillStyle = '#fff'
context.font = 'bold 30pt Menlo'
context.fillText('flaviocopes.com', 600, 530)
loadImage('./logo.png').then(image => {
context.drawImage(image, 340, 515, 70, 70)
const buffer = canvas.toBuffer('image/png')
fs.writeFileSync('./test.png', buffer)
})
Download my free Node.js Handbook
More node tutorials:
- An introduction to the npm package manager
- Introduction to Node.js
- HTTP requests using Axios
- Where to host a Node.js app
- Interact with the Google Analytics API using Node.js
- The npx Node Package Runner
- The package.json guide
- Where does npm install the packages?
- How to update Node.js
- How to use or execute a package installed using npm
- The package-lock.json file
- Semantic Versioning using npm
- Should you commit the node_modules folder to Git?
- Update all the Node dependencies to their latest version
- Parsing JSON with Node.js
- Find the installed version of an npm package
- Node.js Streams
- Install an older version of an npm package
- Get the current folder in Node
- How to log an object in Node
- Expose functionality from a Node file using exports
- Differences between Node and the Browser
- Make an HTTP POST request using Node
- Get HTTP request body data using Node
- Node Buffers
- A brief history of Node.js
- How to install Node.js
- How much JavaScript do you need to know to use Node?
- How to use the Node.js REPL
- Node, accept arguments from the command line
- Output to the command line using Node
- Accept input from the command line in Node
- Uninstalling npm packages with `npm uninstall`
- npm global or local packages
- npm dependencies and devDependencies
- The Node.js Event Loop
- Understanding process.nextTick()
- Understanding setImmediate()
- The Node Event emitter
- Build an HTTP Server
- Making HTTP requests with Node
- The Node fs module
- HTTP requests in Node using Axios
- Reading files with Node
- Node File Paths
- Writing files with Node
- Node file stats
- Working with file descriptors in Node
- Working with folders in Node
- The Node path module
- The Node http module
- Using WebSockets with Node.js
- The basics of working with MySQL and Node
- Error handling in Node.js
- The Pug Guide
- How to read environment variables from Node.js
- How to exit from a Node.js program
- The Node os module
- The Node events module
- Node, the difference between development and production
- How to check if a file exists in Node.js
- How to create an empty file in Node.js
- How to remove a file with Node.js
- How to get the last updated date of a file using Node.js
- How to determine if a date is today in JavaScript
- How to write a JSON object to file in Node.js
- Why should you use Node.js in your next project?
- Run a web server from any folder
- How to use MongoDB with Node.js
- Use the Chrome DevTools to debug a Node.js app
- What is pnpm?
- The Node.js Runtime v8 options list
- How to fix the "Missing write access" error when using npm
- How to enable ES Modules in Node.js
- How to spawn a child process with Node.js
- How to get both parsed body and raw body in Express
- How to handle file uploads in Node.js
- What are peer dependencies in a Node module?
- How to write a CSV file with Node.js
- How to read a CSV file with Node.js
- The Node Core Modules
- Incrementing multiple folders numbers at once using Node.js
- How to print a canvas to a data URL
- How to create and save an image with Node.js and Canvas
- How to download an image using Node.js
- How to mass rename files in Node.js
- How to get the names of all the files in a folder in Node
- How to use promises and await with Node.js callback-based functions
- How to test an npm package locally
- How to check the current Node.js version at runtime
- How to use Sequelize to interact with PostgreSQL
- Serve an HTML page using Node.js
- How to solve the `util.pump is not a function` error in Node.js