plugin-print

@jimp/plugin-print

Print text on an image.

Jimp supports basic typography using BMFont format (.fnt) even ones in different languages! Just find a bitmap font that is suitable bitmap fonts.

Online tools are also available to convert TTF fonts to BMFont format. They can be used to create color font or sprite packs.

⭐ Littera

⭐ Hiero

Included Fonts

• Jimp.FONT_SANS_8_BLACK
• Jimp.FONT_SANS_10_BLACK
• Jimp.FONT_SANS_12_BLACK
• Jimp.FONT_SANS_14_BLACK
• Jimp.FONT_SANS_16_BLACK
• Jimp.FONT_SANS_32_BLACK
• Jimp.FONT_SANS_64_BLACK
• Jimp.FONT_SANS_128_BLACK
• Jimp.FONT_SANS_8_WHITE
• Jimp.FONT_SANS_16_WHITE
• Jimp.FONT_SANS_32_WHITE
• Jimp.FONT_SANS_64_WHITE
• Jimp.FONT_SANS_128_WHITE

loadFont

Loads a bitmap font from a file

• @param {string} file the file path of a .fnt file
• @param {function(Error, Jimp)} cb (optional) a function to call when the font is loaded
• @returns {Promise} a promise

import jimp from 'jimp';

async function main() {
  const font = await jimp.read(jimp.FONT_SANS_32_BLACK);
}

main();

print

Draws a text on a image on a given boundary

_ @param {Jimp} font a bitmap font loaded from Jimp.loadFont command _ @param {number} x the x position to start drawing the text _ @param {number} y the y position to start drawing the text _ @param {string} text the text to draw (string or object with text, alignmentX, and/or alignmentY) _ @param {number} maxWidth (optional) the boundary width to draw in _ @param {number} maxHeight (optional) the boundary height to draw in - @param {function(Error, Jimp)} cb (optional) a function to call when the text is written

import Jimp from 'jimp';

async function main() {
  const font = await Jimp.loadFont(Jimp.FONT_SANS_32_BLACK);
  const image = await Jimp.read(1000, 1000, 0x0000ffff);

  image.print(font, 10, 10, 'Hello World!');
}

main();

Alignment

Alignment modes are supported by replacing the str argument with an object containing text, alignmentX and alignmentY. alignmentX defaults to Jimp.HORIZONTAL_ALIGN_LEFT and alignmentY defaults to Jimp.VERTICAL_ALIGN_TOP.

You can align text using the following constants.

Jimp.HORIZONTAL_ALIGN_LEFT;
Jimp.HORIZONTAL_ALIGN_CENTER;
Jimp.HORIZONTAL_ALIGN_RIGHT;

Jimp.VERTICAL_ALIGN_TOP;
Jimp.VERTICAL_ALIGN_MIDDLE;
Jimp.VERTICAL_ALIGN_BOTTOM;

Default align modes for image.print are:

{
    alignmentX: Jimp.HORIZONTAL_ALIGN_LEFT,
    alignmentY: Jimp.VERTICAL_ALIGN_TOP
}

const font = await Jimp.loadFont(pathOrURL);

// prints 'Hello world!' on an image, middle and center-aligned
image.print(
  font,
  x,
  y,
  {
    text: 'Hello world!',
    alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER,
    alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE
  },
  maxWidth,
  maxHeight
);

Staggering Text

If you need to stagger text position along the x or y-axis the print method also returns the final coordinates as an argument to the callback.

const font = await Jimp.loadFont(Jimp.FONT_SANS_32_BLACK);

image.print(
  font,
  10,
  10,
  'Hello world that wraps!',
  50,
  (err, image, { x, y }) => {
    image.print(font, x, y + 20, 'More text on another line', 50);
  }
);

measureText

Measure how wide a piece of text will be.

import jimp from 'jimp';

async function main() {
  const font = await jimp.read(jimp.FONT_SANS_32_BLACK);
  const image = await jimp.read(1000, 1000, 0x0000ffff);

  image.measureText(font, 'Hello World!');
}

main();

measureTextHeight

Measure how tall a piece of text will be.

import jimp from 'jimp';

async function main() {
  const font = await jimp.read(jimp.FONT_SANS_32_BLACK);
  const image = await jimp.read(1000, 1000, 0x0000ffff);

  image.measureTextHeight(font, 'Hello World!', 100);
}

main();