0

Have some array like this:

var myArray=[
  { title: 'Some title', time: 'Some time'},
  ...
  ];

And node-gm code:

gm('bg.png')
  .fill("#ffffff")
  .font("Phenomena-Bold.otf", 27)
  .drawText(225, 75, "Some text")
  .write("result.png", function (err) {
    if (!err) console.log('done');
  });

Need to add each item from myArray to .drawText() with shifting y-axis to 45px. Any ideas?

num8er
  • 18,604
  • 3
  • 43
  • 57
Dan Mishin
  • 107
  • 2
  • 8

1 Answers1

3

You've asked, I wrote and tested it.

Take (:

const
  gm = require('gm');

const myArray = [
  { title: 'Some title', time: 'Some time'},
  { title: 'Second title', time: 'second time'}
];

const
  image = gm('bg.jpg')
            .fill('#ffffff')
            .font('Arial', 27) // I didn't wanted to play with fonts, so used normal default thing (:
            .drawText(225, 75, "Some text");

let x = 225;
let y = 75;
for(const text of myArray) {
  y += 45;
  image.drawText(x, y, text.title);
}
image.write('result.png', err => {
  if(err) return console.error(err);
  console.log('done');
});

prove of work

num8er
  • 18,604
  • 3
  • 43
  • 57
  • 2
    Thanks a lot! Really helpful solution! – Dan Mishin Aug 20 '17 at 09:50
  • Maybe you know how change font color in one drawText function? For example first word with white color, word before with red color: .drawText(10,10, 'white text and then red text') – Dan Mishin Aug 20 '17 at 10:26
  • Thanks, I know about `fill` and how use it: `.fill('#ffffff').drawText(x,y, text) .fill('#333333').drawText(x,y, text)` But i can't understand how use it in the same `drawText` function. Read manual firstly but can't find answer. – Dan Mishin Aug 20 '17 at 10:42
  • @DanMishin just call chained: image.fill("#ff0000").drawTezt() – num8er Aug 20 '17 at 10:44
  • @DanMishin just call chained everytime before calling draw text: image.fill("#ff0000").drawText() – num8er Aug 20 '17 at 10:44
  • Sorry! Probably I badly explain :) Look: when we call .drawText we need declair x-axis and y-axis position and then text string. I want to know how can i use different colors in the one text string. It's possible or not? I can use several .drawText function and .fill function between them but i don't know how long my first .drawText string for set x,y position for next .drawText with other color. Thanks for tolerance :) – Dan Mishin Aug 20 '17 at 11:05
  • @DanMishin You can keep y axis and move caret to some amount of pixels right again by calling same fill drawText. Little bit "math" of calculating pixel width of every symbol of first text, maybe: lenght x 18 (play with number) – num8er Aug 20 '17 at 11:09
  • I'm using the in a lambda (with an imageMagick layer) The same code with a resize works fine but the drawText doesn't' seem to do anything. Any thougths? – lowcrawler Feb 18 '22 at 21:13
  • @lowcrawler put it in gist or pastebin – num8er Feb 19 '22 at 00:13