$ npm install @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
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
Loads a bitmap font from a file
import Jimp from 'jimp';
async function main() {
const font = await Jimp.loadFont(Jimp.FONT_SANS_32_BLACK);
}
main();
Draws a text on a image on a given boundary
Jimp.loadFont
commandtext
, alignmentX
, and/or alignmentY
)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 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.
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);
}
);
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();
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();
© 2010 - cnpmjs.org x YWFE | Home | YWFE