0

I use nodejs gm drawText function to add text to images based on coordinates. Everything is good except the text displayed in bold randomly (red border marked in the below image). I don't need to show text in bold. How to make all text display normally (not in bold)?

 const imageGM = gm(originalImagePath).font(path.join(__dirname, '../', 'assets/R-PMingLiU-TW-2.ttf'));
 const fntSize = 42;
 imageGM.fontSize(fntSize).drawText(xPos, YPos, value);

The output image: enter image description here

Evan
  • 191
  • 2
  • 15

2 Answers2

0

The issue you're facing with the gm module in Node.js where the text is randomly appearing bold might be due to the font rendering or anti-aliasing settings of the underlying GraphicsMagick/ImageMagick system. However, the gm module doesn't provide direct control over these settings.

The gm module in Node.js is a wrapper around the GraphicsMagick/ImageMagick command-line tools, so its capabilities are limited by what those tools can do.

The drawText function you're using is part of the drawing primitives in GraphicsMagick. According to the GraphicsMagick documentation, the draw command (which includes drawText) allows you to annotate an image with shapes, text, and other graphical elements. However, the documentation does not provide specific details on how text rendering is handled

Here are a few things you could try:

  • The issue might be specific to the font you're using. Try using a different font and see if the problem persists.
  • Sometimes, certain font sizes can cause rendering issues. Experiment with different font sizes to see if it makes a difference.
  • Make sure you're using the latest version of GraphicsMagick or ImageMagick. Upgrading to the latest version might solve the issue if it's a bug that has been fixed in a newer version.
  • Use a different library: If none of the above solutions work, you might want to consider using a different library for image manipulation that gives you more control over text rendering.

Here are some resources that might help you understand more about this issue:

  • gm : GraphicsMagick for node.js - GitHub Pages: This is the documentation for the gm module, which you're using in your Node.js application. It provides information on how to use the module and its various functions, including drawText.

  • aheckmann/gm: GraphicsMagick for node - GitHub: This is the GitHub repository for the gm module. You might find more information on your issue here, or you could raise an issue to ask the maintainers about the problem.

  • can i draw a bold text with regular font? - ImageMagick: This forum thread discusses how to draw bold text with a regular font in ImageMagick. One suggestion is to set the -strokecolor to the same color as -fill and set a -strokewidth to 1(default) or 2. However, the best method is to use a bold version of the font if it is part of a specific font family.

  • ImageMagick: Bold and Italic Fonts? - Stack Overflow: This Stack Overflow thread discusses how to make fonts bold and italic in ImageMagick. One solution suggested is to use the font name with hyphens, like -font "Arial-Bold-Italic".

  • ImagickDraw::setFontWeight - Manual - PHP: This PHP manual page for the ImagickDraw::setFontWeight function mentions that any value 551 and above would give a bold font.

  • ImageMagick text display – Geo Imagine Developer: This blog post discusses how to add text to an image using ImageMagick. It mentions that if ImageMagick does not put the text as expected (or not text at all), the chance is that your layer is not filling up the canvas.

Please note that the behavior of the drawText function in GraphicsMagick's Node.js wrapper might not be exactly the same as in ImageMagick

K4M1coder
  • 21
  • 8
0

For drawing a line on some text, I use gm drawLine function

  imageGM.stroke('#000000',3).drawLine(xPos, yPos, xPos + lineLength, yPos);

This code leads to bold font issues in the further part of the form. Because drawText and drawLine share the same gm object. I set stroke('#000000',3) changing the default font style.

Evan
  • 191
  • 2
  • 15