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

[chancein007]

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!!!

[hipstersmoothie]

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

[chancein007]

@hipstersmoothie Many thanks

[Adron55]

U can use Hiero for change color and size

[LukaszWiktor]

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);

[maitrungduc1410]

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

[abdel78900]

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

Hello

can you tell me where to insert this line of code.
thank you

[ghost]

Hello @LukaszWiktor @maitrungduc1410, could you explain more where to insert this?

import jimp from 'jimp'

async function main() {
  const font = await jimp.loadFont(jimp.FONT_SANS_32_BLACK)

  const image = await jimp.read('test1.jpg')

  image.print(font, 0, 0,   {
    text: 'Hello, Dexter Morgan!',
    alignmentX: jimp.HORIZONTAL_ALIGN_CENTER,
    alignmentY: jimp.VERTICAL_ALIGN_MIDDLE
  },
    image.getWidth(),
    image.getHeight()
  )

  image.write('test2.jpg')
}

main()

[codesport]

@abdel78900 @gugamacedo

This stackOverflow answer has this example:

Jimp.read('testImage.jpg', (err, baseImage) => {
    if (err) throw err;

    let textImage = new Jimp(1000,1000, 0x0, (err, textImage) => {  
        //((0x0 = 0 = rgba(0, 0, 0, 0)) = transparent)
        if (err) throw err;
    })

    Jimp.loadFont(Jimp.FONT_SANS_32_BLACK).then(font => {
        textImage.print(font, 0, 0, "My Text")
        textImage.color([{ apply: 'xor', params: [#00ff00] }]); 
        image.blit(textImage, 0, 0)
        image.write('testOutput.jpg'); // save
    });
});

[YMC-GitHub]

@abdel78900 @maitrungduc1410 @LukaszWiktor
Works perfectly. Thank you

[hipstersmoothie]

If any changes to the docs are needed and wants to submit a PR to fix I'm able to review and merge!