Search code examples
node.jsimagemagickgraphicsmagick

How to make a picture and text using GraphicsMagick for NodeJS?


I have GraphicsMagick v1.3.28

I have NodeJS v8.9.4

I have GraphicsMagick for NodeJS https://github.com/aheckmann/gm

I have image: https://i.sstatic.net/xtk4U.png

I have text: HELLO SUPERMAN

How to create this result - https://i.sstatic.net/BQvSa.png

var fs = require('fs');
var gm = require('gm');

gm('./logo.png')
    .font("./font.ttf", 12)
    .fontSize(68)
    .fill("#555")
    .drawText(20, 72, "HELLO")
    .fill("#fa0")
    .drawText(274, 72, " SUPERMAN")
    .write('./out.png', function (err) {
        console.log(err);
    });

Solution

  • In Imagemagick command line (unix syntax), I would do the following. Get the height of your image and specify some width say 200. Then make a caption: image for your text. Than append them side-to-side.

    height=`convert SeHrHLC.png -format "%h" info:`
    convert SeHrHLC.png \
    \( -background none -size 200x$height -fill black \
    -font Arial -gravity west caption:"Hello Superman" \) \
    +append \
    result.png
    

    enter image description here

    Sorry, I do not know node or graphicsmagick. But imagemagick is very similar to graphicsmagick.