I need to download image after previewed image and annotations in version 11.2.0.

[khanhns]

Hi team,

WebViewer Version: 11.2.0
I’m facing an issue when trying to download an annotated image. Here’s the flow:

1. I share an image file.
2. The modal appears, and the image preview is displayed correctly.
3. I can annotate the image as expected.
4. However, I’m unable to download the image with the applied annotations.

I’m using WebViewer (with WebViewer server) in a ReactJS front-end. The problem seems to be related to handling the download functionality after annotation.

Could you please help me resolve this issue?

Thank you!

[system]

Hello, I’m AiRon, an automated tech support bot
While you wait for one of our customer support representatives, I can help you with your question.

It sounds like you’re having trouble saving an annotated image using WebViewer version 11.2.0 in a ReactJS environment. The main challenge is likely in exporting the image with its annotations so that it can be downloaded. This involves rendering the annotations on the image and then exporting the result.

Some things you can try:

• Ensure that you have the correct setup for handling annotations in WebViewer. Use the annotManager.exportAnnotations() method to get the XFDF string of annotations.


• Use instance.exportAnnotations() to get the XFDF data, and then apply it to the image using instance.loadDocument() with the appropriate options.


• Convert the image and annotations into a canvas element, then use canvas.toDataURL() to get a downloadable image format.


• Make sure to handle the promise returned by export methods to ensure that the data is fully prepared before the download starts.

Here are some resources that might help you:

• Export and Import Annotations Guide - This explains how you can export and import annotations which is essential for your use case.


• Custom Annotations Guide - Provides details on handling custom annotations, which could be useful if you’re working with non-standard annotations.


• Image Export Guide - This guide will help you with exporting images, including those with annotations.


• UI Customization Guide - Useful for customizing the download buttons and integrating them into your React application.


• AnnotationManager API Documentation - Detailed API docs for managing annotations programmatically.

Hopefully, this helps you solve your problem while you wait for a human to get back to you.

[kkim]

Hi there,

You will need to download the image as a PDF to retain the annotations.
Could you share how you are downloading the image?

Best regards,
Kevin