Draw Border around images

[marco-solare]

Dear @devongovett thanks for the fantastic library!

My Question is:

I am currently trying to add a border to images - so I searched for something like widthOfImage / heighOfImage to get the dimensions of placed / included images within the document that get placed like that:

doc.image( 'image.png', 20, 30, { fit: [400, 300], align: 'center' } );

is there a way to get the image dimensions in order to use them to draw a rectangle over the image or another way to add borders?

Best, Marco.

[alafr]

You can get the image dimensions like this:

var img = doc.openImage('image.png');
var width = img.width;
var height = img.height;
doc.image(img);

[javactive]

alafr, I don't see doc.openImage in the PdfKit API for PDFDocument. I tried and didn't work

[alafr]

It works in the browser demo. The openImage function is not yet documented. It returns a PDFImage object which has width, height properties and can be used in doc.image calls instead of the image path.

var doc = new PDFDocument();
var stream = doc.pipe(blobStream());

var imageUrl = 'data:image/png;base64,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';
var img = doc.openImage(imageUrl);
var width = img.width;
var height = img.height;
doc.text('The image size is ' + width + 'x' + height + 'px');
var x = doc.x;
var y = doc.y;
doc.image(img, x, y);
doc.rect(x, y, width, height).stroke();

doc.end();

stream.on('finish', function() {
  iframe.src = stream.toBlobURL('application/pdf');
});