Jimp: Text alignment removes text completely

[Xenorio]

Expected Behavior

Text should be aligned to center

Current Behavior

Text is not visible

Failure Information (for bugs)

image.print(font, 100, 100, text) works as intended, but if i use image.print(font, 100, 100, { text: text, alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER }) the text is not visible on the image. There is no error in the console.

Here is a link to the exact code i'm using: https://pastebin.com/3VDSNLjw

Unedited image: https://imgur.com/SzVAm32
Image after editing without text alignment: https://imgur.com/4aB8SaZ
Image after editing with text alignment: https://imgur.com/iTViXxz

Steps to Reproduce

image.print(font, 100, 100, { text: text, alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER })

Context

• Jimp Version: 0.6.0
• Operating System: Ubuntu 18.04 LTS
• Node version: 8.11.4

[booo]

Are you sure this is a bug? This works for me:

var Jimp = require('jimp');

// open a file called "lenna.png"
Jimp.read('lenna.jpg', (err, image) => {
  if (err) throw err;
  Jimp.loadFont(Jimp.FONT_SANS_64_WHITE, (err, font) => {
    var w = image.bitmap.width;
    var h = image.bitmap.height;
    let text = "foo"
    var textWidth = Jimp.measureText(font, text);
    var textHight = Jimp.measureTextHeight(font, text);
    image
      .print(font, w/2 - textWidth/2, h/2 - textHight/2,
        {   
        text: text,
        //alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER,                                                                                                                      
        //alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE,
        }, textWidth, textHight)
      .write('lena-small-bw.jpg'); // save
  }); 
    //.resize(256, 256) // resize
    //.quality(60) // set JPEG quality
    //.greyscale() // set greyscale
});

Maybe there should be better documentation on the topic. Took me quite some time to figure this out too.

[Xenorio]

@booo Your solution is working for me! Thanks for the help!

The docs really should be changed if this is the proper way to go tho.

Closing this now!

[sertal70]

Sorry guys for writing on a closed issue, but I'm trying to implement this and I found a little bit strange that @booo is actually not using alignment constants to position the text.

Its code sample calculates propers value for x and y coordinates instead of using Jimp constants, which are actually commented out.

I tried to rely on Jimp alignment constants only to position the text, but the result is the same of @Xenorio (text is not displayed at all).

So does it mean that those alignment constants don't works? In that case, shouldn't this issue opened again?

[booo]

This is another example that works for me.

      image
        .print(
          font,
          20, 
          0,  
          //w/2 - textWidth/2,
          //h/2 - textHight/2,
          {   
            text: text,
            alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER,
            alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE
          },  
          400,
          //textWidth,
          220 
        ); 

[booo]

For alignment to work properly you need to specify maxWidth and maxHeigh in your call to print().

https://github.com/oliver-moran/jimp/blob/master/packages/plugin-print/src/index.js#L295

The code is sometimes the source of enlightenment.

[sertal70]

Thanks @booo, specifying maxWidth and maxHeight actually does the job.

Honestly I was a little bit confused about alignment constants, because If I specify

{   
   text: text,
   alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER,
   alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE
}

I would expect that Jimp will position the text in the center of the image, regardless of the value I passed on x and y coordinates and even if I would not set maxWidth/maxHeight (because they are implicitly equal to the image size).

Anyway as I said by calling print() in the following way the result is as expected:

.print(
   font,
   0,
   0,
   { 
      text: text,
      alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER,
      alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE
   },
   IMAGE_SIZE_X,
   IMAGE_SIZE_Y,
)

[hipstersmoothie]

Feel free to make PRs for the docs to be more thorough!

[sertal70]

@hipstersmoothie I did it, let me know if it is fine for you.

[joey2031]

.print(font, 0, 0, // this should work but its aligning to 0, 0 not the center
{
text: imageCaption,
alignmentX: jimp.HORIZONTAL_ALIGN_CENTER,
alignmentY: jimp.VERTICAL_ALIGN_MIDDLE,
}, textWidth, textHight)
.write(pathTwo); // save
});
I did this and it places the text at 0, 0. Are the constants no longer supported?
jimp.read(path, (err, image) => {
if (err) throw err;
jimp.loadFont(jimp.FONT_SANS_64_WHITE, (err, font) => {
var w = image.bitmap.width;
var h = image.bitmap.height;
let text = "foo"
var textWidth = jimp.measureText(font, text);
var textHight = jimp.measureTextHeight(font, text);
image
.print(font, w/2 - textWidth/2, h/2 - textHight/2,
{
text: imageCaption,
//alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER,
//alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE,
}, textWidth, textHight)
.write(pathTwo); // save
});
//.resize(256, 256) // resize
//.quality(60) // set JPEG quality

});
This works a bit better but only for one word, if I put a whole sentence it gets pushed down, any idea where i'm going wrong? Any help is greatly appreciated.