question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Text alignment removes text completely

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:10 (3 by maintainers)

github_iconTop GitHub Comments

4reactions
booocommented, Jan 18, 2019

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.

2reactions
booocommented, Feb 12, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

text-align - CSS-Tricks
The text-align property in CSS is used for aligning the inner content of a block element.
Read more >
text-align-last - CSS: Cascading Style Sheets - MDN Web Docs
The text-align-last CSS property sets how the last line of a block or a line, right before a forced line break, is aligned....
Read more >
Align text in a cell - Microsoft Support
To center text spanning several columns or rows, click Merge & Center. Undo alignment changes. To remove an alignment change immediately after you...
Read more >
Margins Prevent Text Align - html - Stack Overflow
I want this website to have 2 sections of text, one on each side of the screen. I did this successfully. I used...
Read more >
Centered, Justified, Right Aligned Text Style Example
The left value of the text-align property is the default. So, every content inside a block-level element is aligned to the left by...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found