0

JIMP uses bitmap fonts... which don't seem to have an option to setting their color.

I'd like to change the color of the font to any arbitrary color, then overlay this watermarking text over a base background image.

I can load the image and put text on it, like so:

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

    Jimp.loadFont(Jimp.FONT_SANS_32_BLACK).then(font => {
        baseImage.print(font, 0, 0, "My Text")
        baseImage.write('testOutput.jpg'); // save
    });

});

But changing the color of the JIMP font seems to be something non-obvious.

lowcrawler
  • 6,777
  • 9
  • 37
  • 79

1 Answers1

3

Solved this.

It takes advantage of creating a transparent image, putting BLACK text on that image, then using the xor operation to effectively 'color' the black text. You the drop that newly-colored text layer onto the original base image.

See:

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

Net result: testOutput.jpg looks like testImage.jpg but with blue text saying "My Text" on top of it.

I'm sure you could shrink the size of the created 'textImage' as well, but for color-changing illustration purposes, hard-coding it as 1000x1000 works.

lowcrawler
  • 6,777
  • 9
  • 37
  • 79
  • 1
    You may apply this commands to get the exact dimensions: ```const measureTextWidth = Jimp.measureText(font, textLabel); const measureTextHeight = Jimp.measureTextHeight(font, textLabel, measureTextWidth); let textImage = new Jimp(measureTextWidth, measureTextHeight, 0x0);``` – entropyfeverone Apr 29 '22 at 14:33