Get height and width of images and texts before render them

Hi @devongovett ! I’m react-pdf creator. We are following your advice of using pdfkit as a render engine, unless until we need to use some more complex stuff that pdfkit currently doesn’t have. Just let me say that is working great so far!

However, I’ll need to know the bounding box of texts and images before render them on the document. Is that even possible? This is something crucial for us, since we need to update yoga layout to know the text’s x and y.

I saw that text has widthOfString and heightOfString, but they not return what I expect. What’s more, heightOfString makes the program crash.

Thank in advance!

[devongovett]

widthOfString returns the width of the given text as if it were all on one line. It uses font metrics scaled to the current font (set with doc.font and font size (set with doc.fontSize(x)).

heightOfString requires you already know your desired width to wrap within. You can call it with doc.heightOfString(text, {width: x}). Couldn’t reproduce the crash here, so can you provide a stack trace if it’s still broken?

[TBGerstenberg]

Hi,

I know this issue is quite old, yet I wonder if someone managed to figure the bounding box of images out before rendering (as part of the original question).

I am rendering my images using the “fit” option, which scales the image to fit into a bounding box of predefined dimensions. To calculate the space an image would take when rendered like this, I have tried loading the image with document.open(imageUrl) and performing the same scaling calculations as I assume PDFKit is doing, which is pretty standard:

if (options.fit) {
    [bw, bh] = options.fit;
    bp = bw / bh;
    ip = image.width / image.height;
    if (ip > bp) {
        w = bw;
        h = bw / ip;
    } else {
        h = bh;
        w = bh * ip;
    }
}

from : https://github.com/foliojs/pdfkit/blob/326350b7f958ed24730ce809b98dc803d3e14562/lib/mixins/images.js

yet after rendering the image, the actual height it takes is a lot larger (moves document.y more) than I calculated before rendering. Heres how i’m calculating the vertical space my image is (supposedly) taking:

...

let boundingRectWidth = MAX_COLUMN_WIDTH;
let boundingRectHeight = 
imageMeta.orientation === 'LANDSCAPE'
          ? MAX_IMAGE_HEIGHT_LANDSCAPE
          : MAX_IMAGE_HEIGHT_PORTRAIT;

let bp = boundingRectWidth / boundingRectHeight; // These are the values that are set in the "fit" option when rendering
let ip = image.width / image.height; // These are the actual image dimensions 

if (ip > bp) {
   heightOfImage = boundingRectHeight / ip;
} else {
   heightOfImage = boundingRectHeight;
}

...

Any idea why that would be happening?

Thanks in advance.