Annotations not displaying consistently on Web, iOS and Android when Image is displayed in viewer

Product Version:

  • Web: Webviewer ( 7.3.2 )
  • iOS : PDFnet ( 9.3.1.80205 )
  • Android : PDFnet (7.0.3)

Please give a brief summary of your issue:
Loading an image in viewer is not consistent from Web, Android and iOS.

Please describe your issue and provide steps to reproduce it:

I’m converting and loading an image (png) inside the viewers in web, iOS and Android and when I create an annotation on this image, there is an offset and a scale difference between platforms. (see picture below with the red circle annotation). When I load a PDF, the annotations are consistent but not with the image. What am I doing wrong please ? Thanks in advance,

In web, I’m converting and loading the image file like this:

viewerInstance.loadDocument(url, {filename: file.name});

In iOS, I’m converting and loading the image file like this:

doc = PTPDFDoc()
PTConvert.toPdf(doc, in_filename: selectedDoc)

In Android, I’m converting and loading the image file like this:

DocumentConversion mPdfDoc2 = mPdfViewCtrl.openNonPDFUri(ResourceHelper.getUriFromUrl( getActivity(), mFile.url ), null);
PdfDoc = mPdfDoc2.getDoc();

Hi Laurent,

Thank you for reaching out.

To keep the image sizes consistent between different platforms, you would have to adjust the page size option.
“PageSizes” is a page-sized array of 2 number [xPoints yPoints] arrays. determines the output page size in points.

The recommended API for conversion from image to PDF in iOS is StreamingPDFConversion.

PTConvert.streamingPDFConversionWithDoc(fromFilter: doc, in_stream: selectedDoc, options:  PTConversionOptions(value: "{\"PageSizes\": [[\(width), \(height)]]}"))

In web:

viewerInstance.loadDocument(url, {
  filename: file.name,
  pageSizes: [{width, height}]
})

Android:

String conversionOptions = null;
try {
    JSONArray firstPageSizeArray = new JSONArray();
    firstPageSizeArray.put(3024);
    firstPageSizeArray.put(3024);
    JSONArray pageArray = new JSONArray();
    pageArray.put(firstPageSizeArray);
    JSONObject convOpt = new JSONObject();
    convOpt.put("PageSizes", pageArray);
    conversionOptions = convOpt.toString();
} catch (Exception ignored) {}
ViewerConfig.Builder builder = new ViewerConfig.Builder();
builder = builder
        .conversionOptions(conversionOptions)

Please let us know if this works for you, or if you have any other questions or concerns.

Best Regards,
Sahil Behl.

Hi, is this response outdated for WebViewer PDFTron 8.7.0?
The function instance.UI.loadDocument(file, {filename: “name”, pageSizes: {}}) doesn’t find any pageSizes properties.

Hi Jakub,

The function loadDocument is actually a function from the documentViewer so it should be called as following

instance.Core.documentViewer.loadDocument(src [, options]);

You can check the available options for this method here and you will see the pageSizes option on this documentation.

Best,
Dandara Navarro

Hi DNavarro,
correct me if I am wrong but what I see available as options, there is no pageSizes, should I use one of the props below instead:

/**
     */
    type loadDocumentOptions = {
        /**
         * The extension of the file. If file is a blob/file object or a URL without an extension then this is necessary so that WebViewer knows what type of file to load.
         */
        extension?: string;
        /**
         * Filename of the document, which is used when downloading the PDF.
         */
        filename?: string;
        /**
         * An object of custom HTTP headers to use when retrieving the document from the specified url.
         */
        customHeaders?: any;
        /**
         * An object of custom query propertyeters to be appended to every WebViewer Server request.
         */
        webViewerServerCustomQuerypropertyeters?: any;
        /**
         * Unique id of the document.
         */
        documentId?: string;
        /**
         * Whether or not cross-site requests should be made using credentials.
         */
        withCredentials?: boolean;
        /**
         * A key that will be used for caching the document on WebViewer Server.
         */
        cacheKey?: string;
        /**
         * An object that contains the options for an Office document.
         */
        officeOptions?: {
            templateValues?: Core.TemplateData;
            doTemplatePrep?: boolean;
            disableBrowserFontSubstitution?: boolean;
            formatOptions?: {
                applyPageBreaksToSheet?: boolean;
                displayChangeTracking?: boolean;
                excelDefaultCellBorderWidth?: number;
                excelMaxAllowedCellCount?: number;
                locale?: string;
            };
        };
        /**
         * A string that will be used to as the password to load a password protected document.
         */
        password?: string;
        /**
         * A callback function that will be called when error occurs in the process of loading a document. The function signature is `function(e) {}`
         */
        onError?: (...params: any[]) => any;
        /**
         * An object that contains the options for a XOD document.
         */
        xodOptions?: any;
        /**
         * Function to be called to decrypt a part of the XOD file. For default XOD AES encryption pass Core.Encryption.decrypt.
         */
        xoddecrypt?: boolean;
        /**
         * An object with options for the decryption e.g. {p: "pass", type: "aes"} where is p is the password.
         */
        xoddecryptOptions?: boolean;
        /**
         * A boolean indicating whether to use http or streaming PartRetriever, it is recommended to keep streaming false for better performance. https://www.pdftron.com/documentation/web/guides/streaming-option.
         */
        xodstreaming?: boolean;
        /**
         * Whether or not to workaround the issue of Azure not accepting range requests of a certain type. Enabling the workaround will add an extra HTTP request of overhead but will still allow documents to be loaded from other locations.
         */
        xodazureWorkaround?: boolean;
        /**
         * Whether to start loading the document in offline mode or not. This can be set to true if the document had previously been saved to an offline database using WebViewer APIs. You'll need to use this option to load from a completely offline state.
         */
        xodstartOffline?: boolean;
    };

    /**
     * Load a document inside WebViewer UI.
     * @example
     * WebViewer(...)
     *   .then(function(instance) {
     *     instance.UI.loadDocument('https://www.pdftron.com/downloads/pl/test.pdf', {
     *       documentId: '1',
     *       filename: 'sample-1.pdf'
     *     });
     *   });
     * @param documentPath - Path to the document OR <a href='https://developer.mozilla.org/en-US/docs/Web/API/File' target='_blank'>File object</a> if opening local file.
     * @param [options] - Additional options
     */
    function loadDocument(documentPath: string | File | Blob | Core.Document | Core.PDFNet.PDFDoc, options?: UI.loadDocumentOptions): void;

It would be expected the code works like:

    const url: string = "url";
    const instance: WebViewerInstance = getInstance();
    const options: UI.loadDocumentOptions = { pageSizes: [800, 600]};
    instance.UI.loadDocument(url, options);

but ends up with error:

Type '{ pageSizes: number[]; }' is not assignable to type 'loadDocumentOptions'.
  Object literal may only specify known properties, and 'pageSizes' does not exist in type 'loadDocumentOptions'.ts(2322)

thanks,
Pawel

Hello Pawel,

There are two different “loadDocument” methods for two different namespaces, one for the Core and one for the UI.
We apologize for the confusing documentation and the improvement on it is already on our backlog.

The Core’s method is the one that can change the page sizes and you can check its documentation here. On this link, you can see the available options for this method and you will see that the pageSizes option is there.

On the other hand, we have the loadDocument method for the UI namespace which is the one you mentioned and does not have the pageSizes option.

I hope that clarifies your questions.

Dandara Navarro