Technical FAQs

Question

How do I remove XMP Data from my image using ImageGear .NET?

Answer

When removing XMP data in ImageGear, the simplest way to do this is to set the XMP Metadata node to null, like so:

ImGearSimplifiedMetadata.Initialize(); 
doc.Metadata.XMP = new ImGearXMPMetadataRoot();

Or, you can traverse through the metadata tree and remove each node from the tree:

// Example code. Not thoroughly tested
private static void RemoveXmp(ImGearMetadataTree tree)
{
ArrayList toRemove = new ArrayList();
foreach (ImGearMetadataNode node in tree.Children)
{
    if (node is ImGearMetadataTree)
        RemoveXmp((ImGearMetadataTree)node);

    if (node.Format != ImGearMetadataFormats.XMP)
        continue;

    toRemove.Add(node);
}

foreach (ImGearMetadataNode node in toRemove)
    tree.Children.Remove(node);
}
Question

I would like to remove the mark selection handles from the marks (annotations and redactions) in the viewer so that my users can’t resize marks, but so they can still move the marks around. How can I do this?

Answer

The easiest way to achieve the functionality you’re looking for would be to simply change the CSS for the mark handles to set their display to none !important. The CSS for the mark handles can be found in viewercontrol.css. See the following code for an example:

/* mark selection handles */
.pccMarkHandleTopLeft,
.pccMarkHandleTopCenter,
.pccMarkHandleTopRight,
.pccMarkHandleMidLeft,
.pccMarkHandleMidRight,
.pccMarkHandleBottomLeft,
.pccMarkHandleBottomCenter,
.pccMarkHandleBottomRight,
.pccMarkHandlePoint,
.pccMarkHandleTextSelectionStart,
.pccMarkHandleTextSelectionEnd {
    position: absolute;
    width: 40px;
    height: 40px;
    display: none !important;
    background-image: url(data:image/png;base64,iVBORw...);
}

@media screen and (-webkit-min-device-pixel-ratio: 2), 
       screen and (min-resolution: 2dppx),
       screen and (min-resolution: 192dpi) {
    .pccMarkHandleTopLeft, 
    .pccMarkHandleTopCenter, 
    .pccMarkHandleTopRight, 
    .pccMarkHandleMidLeft, 
    .pccMarkHandleMidRight, 
    .pccMarkHandleBottomLeft, 
    .pccMarkHandleBottomCenter, 
    .pccMarkHandleBottomRight, 
    .pccMarkHandlePoint, 
    .pccMarkHandleTextSelectionStart, 
    .pccMarkHandleTextSelectionEnd {
        -webkit-background-size: 40px 40px;
                background-size: 40px;
        display: none !important;
        background-image: url(data:image/png;base64,iVBORw...);
    }
}

You will want to set the !important flag so that the functions inside viewercontrol don’t set the display back to block.

One thing you may want to do is separate out pccMarkHandleTextSelectionStart and pccMarkHandleTextSelectionEnd to not include display: none. This way, the text selection annotations are able to be edited, since they are reliant on the handles for "movement" because they select a portion of the text signified by the handles. 

Question

By default, in the PrizmDoc Viewer, links are highlighted and underlined in blue. To follow links within a document, the user needs to click the link, wait for the floating popup to appear showing the link’s target URL, and then click that to actually follow the link. Is there a way to make this a single-click process and skip the floating popup?

Answer

The desired one-click functionality can be achieved by modifying the viewer.js source file:

Inspect around line ~9457; you’ll find the following else if block:

    } else if (ev.targetType === "documentHyperlink") {
        hyperlinkMenuHandler(ev, "view");
    }

This line of code executes when the user clicks on a link displayed within the Viewer. The call to hyperlinkMenuHandler is responsible for displaying the floating popup. If you’d like to immediately open the link in a new window/tab instead, replace the contents of the “if else” block with a call to window.open:

    } else if (ev.targetType === "documentHyperlink") {
        window.open(ev.hyperlink.href, '_blank');
    }

This will allow hyperlinks that appear in the Viewer to be followed in a new window/tab with a single-click.

Question

When printing non-standard size raster images with PrizmDoc they can sometimes become cutoff if too tall or wide. How can I correctly print a non-standard size raster image with PrizmDoc?

Answer

(This explanation is done for a tall portrait image, but can be altered to work for a wide landscape image by flipping the width and height.)

To do this, you have to add a custom paper size to viewerCustomization.js and specify a smaller width so that there is enough room to fit the height of the image on a single page.

To find the correct width value so that the image will fit on a single page, you will need to do some math. In this example, we’ll use an image that is 1305×2823. In this case, the width is 46.2% of the height. If you want to print onto 8.5×11 inch paper, then the width you want to set for your new custom paper size is 11*0.462, which comes out to 5.082.

So now that you have the width, you need to create the new custom paper size. In viewerCustomization.js in the templates section, find the "print" template and add the following code where the other printing paper sizes are located.

/*custom */
.portrait .custom.page { width: 5.082in; height: 11in; margin: 0 auto !important; }
.portrait .custom.pageIE { width: 9.5in; height: 9.5in; margin: 0 auto !important; }
.portrait .custom.pageSafari { width: 8.9in; height: 8.9in; margin: 0 auto !important; }
.portrait .custom.nomargins { width: 11in !important; height: 11in !important; }

/* even without margins, Safari enforces the printer's non-printable area */
.portrait .custom.nomargins.pageSafari { width: 9.32in !important; height: 9.32in !important; }

.landscape .custom.page { height: 5.082in; width: 11in; margin: 0 auto !important; }
.landscape .custom.pageIE { height: 9.05in; width: 9.05in; margin: 0 auto !important; }
.landscape .custom.pageSafari { height: 8.4in; width: 8.4in; margin: 0 auto !important; }
.landscape .custom.nomargins { height: 11in !important; width: 11in !important; }
.landscape .custom.nomargins.pageSafari { height: 9.32in !important; width: 9.32in !important; }
/*custom end*/

As you can see, the width for .portrait .custom.page was set to 5.082in, and the height set to 11in. This will scale the 1305×2823 image to fit on a single 8.5×11 page when printing. By flipping the values and setting them in .landscape you would be able to print a 2823×1305 image on a single landscape page. (Just to note, I only edited the values for .custom.page for portrait and landscape. The others would most likely need to be changed.)

Next you need to add an option for your new paper size to the "paperSize" selection tag in the "printOverlay" section of templates in viewerCustomization.js. Your select tag should end up looking something like this:

<select data-pcc-select="paperSize" class="pcc-print-select">
    <!-- US and International-->
    <option value="letter"><%= paperSizes.letter %></option>
    <option value="legal"><%= paperSizes.legal %></option>
    <option value="tabloid"><%= paperSizes.tabloid %></option>
    <option value="foolscap"><%= paperSizes.foolscap %></option>
    <!-- A formats-->
    <option value="a3"><%= paperSizes.a3 %></option>
    <option value="a4"><%= paperSizes.a4 %></option>
    <option value="a5"><%= paperSizes.a5 %></option>
    <!-- Architectural-->
    <option value="a6"><%= paperSizes.a6 %></option>
    <option value="a"><%= paperSizes.a %></option>
    <option value="b"><%= paperSizes.b %></option>
    <option value="c"><%= paperSizes.c %></option>
    <option value="d"><%= paperSizes.d %></option>
    <option value="e"><%= paperSizes.e %></option>
    <option value="e1"><%= paperSizes.e1 %></option>
        
    <option value="custom">Custom</option>
</select>

The new print option should now appear in the PrizmDoc print settings when selecting a paper size, and it should print the image on a single page.

One thing to note is that you will have to do this for each differently sized image. If you are unsure of the size of uploaded documents, this solution will most likely not be usable.

Question

How can I get a document’s dimensions with PrizmDoc?

Answer

There are two methods you can use to do this with PrizmDoc:

The first method is using the requestPageAttributes() method from ViewerControl. This method allows you to get the width and height of a page in the document in pixels. Below is sample code on how to use requestPageAttributes() to get the attributes of page 1 of a document:

viewerControl.requestPageAttributes(1).then(function(attributes) {
    var pageWidth = attributes.width;
    var pageHeight = attributes.height;
});

The second method is done by making a GET request to the PrizmDoc server to get metadata for a page of the source document in a viewing session. The request is:

GET /PCCIS/V1/Page/q/{{PageNumber}}/Attributes?DocumentID=u{{viewingSessionId}}&ContentType={{ContentType}}

The content type needs to be set to “png” for raster content and “svgb” for SVG content. The request returns the data in a JSON object containing the image’s width and height. The units for the width and height are in pixels when the contentType is set to “png” and unspecified units when the content type is set to “svgb”.

The request also returns the horizontal and vertical resolution of raster content when the content type is set to “png”. This information is similar to pixels per inch, but the units are unspecified, so if you wanted to calculate the size of the document you can calculate it by width divided by horizontal resolution or height divided by vertical resolution. The resolution is hard-coded to 90 when contentType is set to “svgb”.

Question

How can I remove the scroll bar/disable scrolling in PrizmDoc Viewer?

Answer

A quick way to do this would be to have something like the code below. Make sure to do this after this DOM element has loaded, so after the viewer is ready.

$('.pccPageListContainerWrapper').css('overflow', 'hidden');

The following will both remove the scroll bar, and disable scrolling:

$('.pccPageListContainerWrapper').css('overflow', 'unset');
Question

I want to re-arrange the page order of a PDF. I’ve tried the following…

var page = imGearDocument.Pages[indx].Clone();

imGearDocument.Pages.RemoveAt(indx); //// Exception: "One or more pages are in use and could not be deleted."

imGearDocument.Pages.Insert(newIndx, page);

But an exception is thrown. Somehow, even though the page was cloned, the exception states that the page can’t be removed because it’s still in use.

What am I doing wrong here?

Answer

If you’re using an older version of ImageGear .NET, you may run into this exception when you clone the page. Some of the resources between the original and the clone are still shared, which is why this happens.

Starting with ImageGear .NET v24.8, this no longer happens, and the above code should work fine.

If you still need to use the earlier version, you can use the InsertPages method instead.

Question

Can PrizmDoc handle password-protected files, such as PDFs or Excel files?
How would a user specify a password for a particular document?

Answer

It is possible to specify the password for a password-protected document when creating a viewing session in PrizmDoc. When sending a request to create a viewing session, you’ll use the password field in the request body to specify the password. For example…

POST http://localhost:3000/ViewingSession
Content-Type: application/json
{
    "source": {
        "type": "url",
        "url": "https://www.usability.gov/sites/default/files/creating-wireframes.pdf"
    },
    "password": "hunter2"
}

(Replace "hunter2" with the actual password)

Please note that even if a file needs a password and is not provided one (or is provided one that’s incorrect), the viewing session should still be created successfully. The easiest method to determine whether the password is needed/correct is to make a call to get the page. You can do this by making a GET request to the GetPage route using the viewingSessionId created earlier, like so…

GET pas_base_url/Page/q/0?DocumentID=u{viewingSessionId}

…be sure to replace pas_base_url with the root of your Prizm Application Services (PAS) instance (usually this is http://localhost:3000) and replace {viewingSessionId} with the actual value for viewingSessionId created in the previous step.

The above call will return 200 OK if the page load is successful. If a password is required/incorrect, you should see a return status code 480. There will be additional response headers called accusoft-status-number and accusoft-status-message, which should be 4001 and "Document requires a password", respectively.

You can see the above in greater detail in the product documentation here.

You can use this information to re-create a viewing session with the correct password.

Currently, there is a feature request planned for a potential future release of PrizmDoc to prompt the user for a password if one is required.

Question

I am combining multiple PDF documents together, and I need to create a new bookmark collection, placed at the beginning of the new document. Each bookmark should go to a specific page or section of the new document.
Example structure:

  • Section 1
    • Document 1
  • Section 2
    • Document 2

How might I do this using ImageGear .NET?

Answer

You are adding section dividers to the result document. So, for example, if you are to merge two documents, you might have, say, two sections, each with a single document, like so…

  • Section 1
    • Document 1
  • Section 2
    • Document 2

…The first page will be the first header page, and then the pages of Document 1, then another header page, then the pages of Document 2. So, the first header page is at index 0, the first page of Document 1 is at index 1, the second header is at 1 + firstDocumentPageCount, etc.

The following code demonstrates adding some blank pages to igResultDocument, inserting pages from other ImGearPDFDocuments, and modifying the bookmark tree such that it matches the outline above, with "Section X" pointing to the corresponding divider page and "Document X" pointing to the appropriate starting page number…

// Create new document, add pages
ImGearPDFDocument igResultDocument = new ImGearPDFDocument();
igResultDocument.CreateNewPage((int)ImGearPDFPageNumber.BEFORE_FIRST_PAGE, new ImGearPDFFixedRect(0, 0, 300, 300));
igResultDocument.InsertPages((int)ImGearPDFPageNumber.LAST_PAGE, igFirstDocument, 0, (int)ImGearPDFPageRange.ALL_PAGES, ImGearPDFInsertFlags.DEFAULT);
igResultDocument.CreateNewPage(igFirstDocument.Pages.Count, new ImGearPDFFixedRect(0, 0, 300, 300));
igResultDocument.InsertPages((int)ImGearPDFPageNumber.LAST_PAGE, igSecondDocument, 0, (int)ImGearPDFPageRange.ALL_PAGES, ImGearPDFInsertFlags.DEFAULT);

// Add first Section
ImGearPDFBookmark resultBookmarkTree = igResultDocument.GetBookmark();
resultBookmarkTree.AddNewChild("Section 1");
var child = resultBookmarkTree.GetLastChild();
int targetPageNumber = 0;
setNewDestination(igResultDocument, targetPageNumber, child);

// Add first Document
child.AddNewChild("Document 1");
child = child.GetLastChild();
targetPageNumber = 1;
setNewDestination(igResultDocument, targetPageNumber, child);

// Add second Section
resultBookmarkTree.AddNewChild("Section 2");
child = resultBookmarkTree.GetLastChild();
targetPageNumber = 1 + igFirstDocument.Pages.Count;
setNewDestination(igResultDocument, targetPageNumber, child);

// Add second Document
child.AddNewChild("Document 2");
child = child.GetLastChild();
targetPageNumber = 2 + igFirstDocument.Pages.Count;
setNewDestination(igResultDocument, targetPageNumber, child);

// Save
using (FileStream stream = File.OpenWrite(@"C:\path\here\test.pdf"))
{
    igResultDocument.Save(stream, ImGearSavingFormats.PDF, 0, 0, igResultDocument.Pages.Count, ImGearSavingModes.OVERWRITE);
}

...

private ImGearPDFDestination setNewDestination(ImGearPDFDocument igPdfDocument, int targetPageNumber, ImGearPDFBookmark targetNode)
{
    ImGearPDFAction action = targetNode.GetAction();
    if (action == null)
    {
        action = new ImGearPDFAction(
            igPdfDocument,
            new ImGearPDFDestination(
                igPdfDocument,
                igPdfDocument.Pages[targetPageNumber] as ImGearPDFPage,
                new ImGearPDFAtom("XYZ"),
                new ImGearPDFFixedRect(), 0, targetPageNumber));
        targetNode.SetAction(action);
    }
    return action.GetDestination();
}

(The setNewDestination method is a custom method that abstracts the details of adding the new destination.)

Essentially, the GetBookmark() method will allow you to get an instance representing the root of the bookmark tree, with its children being subtrees themselves. Thus, we can add a new child to an empty tree, then get the last child with GetLastChild(). Then, we can set the action for that node to be a new "GoTo" action that will navigate to the specified destination. Upon save to the file system, this should produce a PDF with the below bookmark structure…

Bookmarks example

Note that you may need to use the native Save method (NOT SaveDocument) described in the product documentation here in order to save a PDF file with the bookmark tree included. Also, you can read more about Actions in the PDF Specification.

Question

I encounter an Unhandled Exception error, as shown below, in ImageGear when trying to load a page into the recognition engine.

Error Message: An unhandled exception of type
‘ImageGear.Core.ImGearException’ occurred in ImageGear22.Core.dll

Additional information: IMG_DPI_WARN (0x4C711): Non-supported
resolution. Value1:0x4C711

What is causing this and how can I fix it?

Answer

This is probably because the original image used to create the page didn’t have a Resolution Unit set.

Resolution unit not set in original image

To fix this, check if the page has a Resolution Unit set. If it does not, set it to inches. You should also set the DPI of the image as those values were probably not carried over from the original image since the Resolution Unit wasn’t set. The following code demonstrates how to do this.

// Open file and load page.
using (var inStream = new FileStream(@"C:\Path\To\InputImage.jpg", FileMode.Open, FileAccess.Read, FileShare.Read))
{
    // Load first page.
    ImGearPage igPage = ImGearFileFormats.LoadPage(inStream, firstPage);

    if (igPage.DIB.ImageResolution.Units == ImGearResolutionUnits.NO_ABS)
    {
        igPage.DIB.ImageResolution.Units = ImGearResolutionUnits.INCHES;
        igPage.DIB.ImageResolution.XNumerator = 300;
        igPage.DIB.ImageResolution.XDenominator = 1;
        igPage.DIB.ImageResolution.YNumerator = 300;
        igPage.DIB.ImageResolution.YDenominator = 1;
    }

    using (var outStream = new FileStream(@"C:\Path\To\OutputImage.jpg", FileMode.OpenOrCreate, FileAccess.ReadWrite))
    {
        // Import the page into the recognition engine.
        using (ImGearRecPage recognitionPage = recognitionEngine.ImportPage((ImGearRasterPage)igPage))
        {
            // Preprocess the page.
            recognitionPage.Image.Preprocess();

            // Perform recognition.
            recognitionPage.Recognize();

            // Write the page to the output file.
            recognitionEngine.OutputManager.DirectTextFormat = ImGearRecDirectTextFormat.SimpleText;
            recognitionEngine.OutputManager.WriteDirectText(recognitionPage, outStream);
        }
    }
}
Question

I need to store a unique ID with each of my marks. Is the ID returned by Mark.GetID() unique?

Answer

The ID generated by Mark.GetID() is only unique for that instance of the viewing session (for example, if you refresh the page, the counter for mark IDs will reset to 1).

If you are saving your marks to markup layers using the SaveMarkupLayers() method, then each mark will have a unique ID generated which will be stored in the “uid” key in the markup layer JSON.

If you are saving your marks as XML, using the SaveMarks() method, then each mark’s unique ID will be stored in the key “nodeId”.

If you want to generate your own unique ID for your marks, you can include the code below in your viewer.js to generate a UUID. A UUID contains 122 randomly generated bits so you shouldn’t need to worry about any duplicate IDs:

    function uuidv4() {
      return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
        (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
      )
    }

You can store this UID in the marks data using Mark.SetData("ID", uuidv4());.

You can then use Mark.GetData("ID"); to retrieve the ID at a later time.

Question

I know the coordinates and dimensions of the content I would like to highlight, but the highlight annotation only works on text. Is there a way to create an annotation that highlights a specific area of a document?

Answer

The best way to do this would be to create a yellow rectangle annotation with 50% opacity (these are the same default values used by the text highlight annotation). The code below demonstrates how to do this in the viewer:

//Create a new rectangle annotation
var rectangleMark = viewer.viewerControl.addMark(1,  PCCViewer.Mark.Type.RectangleAnnotation);
//Set the coordinates and dimensions of the annotation
rectangleMark.setRectangle({x: 100, y:  100,  width : 200, height: 200});
//Set fillcolor to yellow
rectangleMark.setFillColor("#FFFF00");
//Remove the border
rectangleMark.setBorderColor("transparent");
//Set opacity to 50%
rectangleMark.setOpacity(127);