Socket
Socket
Sign inDemoInstall

@jimp/plugin-print

Package Overview
Dependencies
52
Maintainers
2
Versions
222
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@jimp/plugin-print

print an image.


Version published
Maintainers
2
Weekly downloads
1,013,922
decreased by-5.78%

Weekly downloads

Readme

Source

@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.

:star: ttf2fnt

:star: Littera

:star: 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.loadFont(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
);

Note: although maxWidth and maxHeight parameters are optional to print(), they are needed to correctly align the text using the requested alignment mode.

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.loadFont(Jimp.FONT_SANS_32_BLACK);
  const image = await Jimp.read(1000, 1000, 0x0000ffff);

  Jimp.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.loadFont(Jimp.FONT_SANS_32_BLACK);
  const image = await Jimp.read(1000, 1000, 0x0000ffff);

  Jimp.measureTextHeight(font, "Hello World!", 100);
}

main();

FAQs

Last updated on 23 Feb 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc