How to render/generate image according to text/string in nodejs?

Question

How can i generate an image of a string that has:

• a size in px
• embossed effect of the letters in the image
• a font
• a color
• and other less important stuff that i think i can figure out once i achieve whats above like:
  • rotation of text
  • drop shadow

basically the user will send a request on how he wants his image to be.

but when i receive the request how should i make use of nodejs to render a png or a base64 url to send it back to the user. is there any libraries or way to achieve this.

i did some previous research and it doesn't seem like there is a frameworks that helps render text with a font and text style like emboss

Heatherheatherly

Does this answer your question? How to create an image on the fly with Node.js? – Taproom

After 6 years I am not looking for an answer anymore. But I am still not sure whats one way to achieve this. I was able to convert text to png using python then. – Heatherheatherly

Answer 1

You can try node canvas implementation: https://github.com/Automattic/node-canvas

Basically you can "draw" anything you want like if you'd be using browser js canvas, but some things may be different

Protoplast

Answer 2

Update - This will cover updating attributes of an image, not pulling text from image and updating that - you may need an image analysis library for that

Use the sharp library to manipulate the image as desired. https://github.com/lovell/sharp http://sharp.dimens.io/en/stable/

A simple example that resizes (docs will show how to make the changes you want outside of this):

const request = require('request').defaults({ encoding: null });

request.get(imgUrl, params, function (err, res, body) {
        sharp(body)
        .resize(params.width, params.height)
        .toFormat('jpeg')
        .toBuffer()
        .then((outputBuffer) => {
          // outputBuffer contains JPEG image data no wider than params.width and no higher
          // than params.height while maintaining quality of image.
          let output = "data:" + res.headers["content-type"] + ";base64," + new Buffer(outputBuffer).toString('base64');
          return output;
        });

The output here will be the base64 image

Intreat

I don't to want to manipulate a an image, i want to generate an image of a text with a font ( and a style if possible ) from an object containing the properties of the text (size, style, color, text). – Heatherheatherly

by render i mean generate – Heatherheatherly