How to create an image on the fly with Node.js? How to create an image on the fly with Node.js? express express

How to create an image on the fly with Node.js?


Maybe you could use canvas? There is also an implementation in node.js by Learnboost(TJ). I think this screencast is interesting to look at. As you see from presentation it even renders text in some examples. Also in the npm registry / node modules section I found a lot more interesting links


Here's some simple code using the canvas library:

const    fs = require("fs"),    { createCanvas } = require("canvas");const WIDTH = 100;const HEIGHT = 50;const canvas = createCanvas(WIDTH, HEIGHT);const ctx = canvas.getContext("2d");ctx.fillStyle = "#222222";ctx.fillRect(0, 0, WIDTH, HEIGHT);ctx.fillStyle = "#f2f2f2";ctx.font = "32px Arial";ctx.fillText("Hello", 13, 35);const buffer = canvas.toBuffer("image/png");fs.writeFileSync("test.png", buffer);

This is the resulting test.png file:

Sample output image

To run it, you must first install the library:

npm i canvas

Instead of saving it to a file, you could, of course, send it as the response of an API call.

For more details on how to draw text using the canvas, see this MDN article.