I want to resize images in the PDF in order to crop them. This has been working on Docraptor successfully for a number of year, but I'm trying to bring our use of Prince in house and hit a problem running the same code. I though it might be version differences as we use Prince 10 on Docraptor and I'm testing with Prince 12. But I have checked through the release notices and not seen anything relevant.

The JS I'm running is this:

function resize_photo(id, size)
{
var item = document.getElementById(id);
if (item)
{
var width = item.naturalWidth;
var height = item.naturalHeight;
if (width == 0)
{
var img = new Image();
img.src = item.src;
width = img.width;
height = img.height;
delete img;
}
// debug code to show the width and height
var newNode = document.createElement("span");
newNode.innerHTML = 'width: ' + width + 'height: ' + height;
item.parentNode.parentNode.insertBefore(newNode, item.parentNode.nextSibling);

// handle landscape and portrait photos differently

if (height > width) {
var newHeight = height * size / width;
var margin_top = (size - newHeight) / 2;
item.style.width = size + 'px';
item.style.height = "auto";
item.style.maxHeight = "none";
item.style.marginTop = Math.floor(margin_top) + 'px';
}
else if(height < width) {
var newWidth = width * size / height;
var margin_left = (size - newWidth) / 2;
item.style.width = "auto";
item.style.height = size + 'px';
item.style.maxHeight = "none";
item.style.maxWidth = "none";
item.style.marginLeft = Math.floor(margin_left) + 'px';
}
else
{ // for some reason the resize not working on square images - do explicitly
item.style.width = "auto";
item.style.height = size + 'px';
item.style.maxHeight = "none";
item.style.maxWidth = "none";
item.style.marginLeft = '0px';
}
}
}


The first image shows the result on Docraptor environment - the height and width are being successfully calculated:

If I add the same images in development and run against Prince 12 , the height and width are shown as undefined - see the second screenshot.

I have found posts date 2014 saying that using width on an image will not work, but it clearly does in Prince 10.

1. Screen Shot 2018-08-06 at 10.17.12.png‎ 197.8 kB ‎
   Shows the images resized
2. Screen Shot 2018-08-06 at 10.28.25.png‎ 185.1 kB ‎
   Undefined width

Prince does not support the "naturalWidth" and "naturalHeight" attributes, I think DocRaptor must be evaluating these using PhantomJS?

Thats useful to know, thank you

Yes, have adopted the same approach and now working fine. Thank you.