Stop Image resizing in Webviewer

WebViewer Version: 10.3.0

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? Yes
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? No
Is your issue related to annotations? Yes

Please give a brief summary of your issue:
(Think of this as an email subject)
Stop Image resizing in Webviewer

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
When an image (jpg or other image files) are loaded in the webviewer, it has a different scale/resolution than the original file. When you click the download button, the image has different height and width already from the original. Is there a way to stop the scaling/resizing to prevent it from changing when we need to export/download it?

Please provide a link to a minimal sample where the issue is reproducible:

Upload a large image here, create an annotation, and click download, It is converted to pdf but the image scale is way different from the original.

1 Like

Hi @johanne.ongchangco,

Thanks for reaching out to WebViewer Support! Can you provide us with a screen recording of your issue so we can confirm exactly the image scaling issue you’re experiencing? I’m noticing the image scaling issue is more apparent if loading smaller images - is this the same issue you’re experiencing?

Any additional information is appreciated.

Thanks,
Adam

1 Like

I have this recording from your actual demo site:
https://recordit.co/592DUiED7x

I have uploaded the image that I have used in the demo. The image scaled down in the web viewer by a large percentage.

1 Like

any update @asinclair ? Thanks

1 Like

Hi @johanne.ongchangco,

Apologies for the delayed response. I wanted to let you know I’m still looking into this and will have more information for you before the end of the week! I appreciate your patience in the meantime.

Thanks,
Adam

2 Likes

Hi @johanne.ongchangco,

Thanks for your patience while we looked into this. For loading the image at the correct size you can take advantage of our DocumentViewer.loadDocument API. With it you can specify an option, pageSizes, that matches the dimensions of your image. When the image is loaded it will be the correct size. You can confirm this by console logging the DocumentViewer page dimensions:

const pathToImage = 'large_car.jpeg';
instance.Core.documentViewer.loadDocument(
  pathToImage,
  { pageSizes: [{ width: 3000, height: 2250 }]
});
console.log(instance.Core.documentViewer.getPageWidth(1));  // 3000
console.log(instance.Core.documentViewer.getPageHeight(1)); // 2250

However, we’ve identified when downloading the document the specified dimensions are not respected. This bug has been added to a backlog for our team to review and schedule into a future sprint . Unfortunately we don’t have a timeline for when this will be fixed but we’ll do our best to keep you updated as we move forward with this.

Let me know how the pageSizes works for you, and if you have any further questions!

Thanks,
Adam

2 Likes

This fixed the issue. Thanks!

1 Like