Jimp: How to add red or purple color text on the image?

Created on 9 Aug 2018  路  5Comments  路  Source: oliver-moran/jimp

var Jimp = require('jimp');
Jimp.read('test.jpg', (err, image) => {
if (err) throw err;
Jimp.loadFont(Jimp.FONT_SANS_32_BLACK).then(function(font) {
image.print(font, 10, 10, 'Hello world!');
image.write('lena-small-bw.jpg');
});
});

I can use the above source to write 'Hello world!' on the test.jpg picture, however, it seems that Jimp only can write white or black text on the image rather than other color: for example, red or purple. How to add red or purple color text on the image?

Any help is much appreciated!!!

Most helpful comment

You don't have to create a color font.
Use black font on a transparent background and XOR if with your desired color:

 textImage.color([{ apply: 'xor', params: ['#ff0000'] }]); // red text

If you need a non-transparent background then create one as a separate image and blit it with the text image:

backgroundImage.blit(textImage, x, y);

All 5 comments

I think you have to find a bitmap font that is already colored. Printing seems to work by having a bitmap font file that maps characters to a special png with all the characters on it already. You might have to play around with a few tools to get your fonts to have color

some examples after a little googling

https://www.colorfonts.wtf/
https://learn.fontself.com/create-your-first-color-font-step-by-step-270ced3f0745

You could try using the tool mentioned in the readme http://kvazars.com/littera/ to create a color font.

A bunch of other tools are also here https://github.com/libgdx/libgdx/wiki/Hiero

@hipstersmoothie Many thanks

U can use Hiero for change color and size

You don't have to create a color font.
Use black font on a transparent background and XOR if with your desired color:

 textImage.color([{ apply: 'xor', params: ['#ff0000'] }]); // red text

If you need a non-transparent background then create one as a separate image and blit it with the text image:

backgroundImage.blit(textImage, x, y);

You don't have to create a color font.
Use black font on a transparent background and XOR if with your desired color:

 textImage.color([{ apply: 'xor', params: ['#ff0000'] }]); // red text

If you need a non-transparent background then create one as a separate image and blit it with the text image:

backgroundImage.blit(textImage, x, y);

Works perfectly. Thank you

Was this page helpful?
0 / 5 - 0 ratings

Related issues

molipha picture molipha  路  6Comments

Yimiprod picture Yimiprod  路  5Comments

SamuelZhaoY picture SamuelZhaoY  路  3Comments

tutyamxx picture tutyamxx  路  4Comments

Inbarasan16 picture Inbarasan16  路  3Comments