How to create an image in Node js?

Question

I am working on a program that generates a quote and then places the text on top of a JPEG image. I have found a npm package to generate a quote, however I can't figure out how I can get the text and place it on top of an image?

I have tried searching for a npm package but was not able to find any. I also thought about having a preloaded image in my directory and from there I can add the text on top of it, however I have no idea how to do that. The only thing I can find is a package that generates pixelated images

const Quote = require('inspirational-quotes');
console.log(Quote.getRandomQuote());
console.log(Quote.getQuote());

var fs = require('fs');
var imgGen = require('js-image-generator');

// Generate one image
imgGen.generateImage(800, 600, 80, function(err, image) {
    fs.writeFileSync('dummy.jpg', image.data);
});

// Generate multiple images
for(var i=1;i<=10;i++){
    imgGen.generateImage(800, 600, 80, function(err, image) {
        console.log("Generating image #" +i);
        fs.writeFileSync('dummy-' + i + '.jpg', image.data);
    });
}

Considered canvas ? npmjs.com/package/canvas

Deepak Kamat
– Deepak Kamat

2019-10-05 04:14:54 +00:00
Commented Oct 5, 2019 at 4:14 — Deepak Kamat
– Deepak Kamat, Commented Oct 5, 2019 at 4:14

Alex Stepanov · Accepted Answer · 2019-10-05 03:41:59Z

1

You may want to take a look at ImageMagick (or GraphicMagick), which is a command line binary (written in C++) that can do all sorts of image manipulations including compositing and text overlays. ImageMagick itself is pretty much a "Swiss knife" of image processing and has been around for many years, with lots of client libraries and ports for pretty much any environment.

For the command line reference and how to overlay text: https://imagemagick.org/Usage/annotating/#wmark_text

There are quite a few capable npm modules that provide ImageMagick/GraphicMagick wrappers, here is just one of them: https://www.npmjs.com/package/gm - and there are many more available

Hope that helps and good luck!

answered Oct 5, 2019 at 3:41

Alex Stepanov

4112 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

icm · Accepted Answer · 2019-10-05 05:35:59Z

0

The JS library "HTML2CANVAS" does what you need: http://html2canvas.hertzen.com/features/

There is a quick tutorial on YouTube here: https://www.youtube.com/watch?v=dPezJKcItuc

I hope that helps :)

answered Oct 5, 2019 at 5:35

icm

711 silver badge14 bronze badges

Collectives™ on Stack Overflow

How to create an image in Node js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related