Hi team,
We have this custom annotation stamp tool that will get placed to the document when the user click on some HTML element (in this case, a div): when this div clicked, some JS code will take that DIV content, generate SVG out from that div content (a text), then use the base64 data from that SVG to dynamically create this annotation as a stamp into the document. All went well until this particular PDF document came up, a scanned document. Our custom annotation wont work with this document. No error, it just never showing, although it produced a valid XFDF. Regular (default) annotations would work though. Later we found out, our annotations would only show up if this document gets rotated and changed into Landscape mode. What could go wrong?
This is my steps on creating our “dynamic” custom stamp annotations:
- When annotation div clicked, get its: text content with its style (text color), and measure its width
- Generate an SVG in the background based on the text and the size gathered from 1st step. Take its base64 string data.
- Use new annotations.StampAnnotation() to create a new stamp annotation and set its:
Width, to whatever the element width (from step 1)
Height, default to some value
… and several info. - Redraw the created stamp annotation with whatever base64 string I get from step 2.
Here’s what the custom stamp init function looks like:
`
initCustomStamp = function(viewer, author, width, height, subject, customData, stampAnnot) {
var currentDocument = viewer.getDocument();
var currentPageRotation = currentDocument.getPageRotation(0);
stampAnnot.Author = author;
stampAnnot.setPageNumber(viewer.getCurrentPage());
stampAnnot.Width = width;
stampAnnot.Height = height;
stampAnnot.Rotation = currentPageRotation;
stampAnnot.Subject = subject;
stampAnnot.Custom = customData;
return stampAnnot;
};
`
And after successfully generate the SVG data for its image string, we then would redraw the stamp by calling this method:
`
redrawLeftPanelStampImage = function(imageData, width, height, dropPos, stampAnnot, annotManager) {
stampAnnot.ImageData = imageData;
if (width !== null) {
stampAnnot.Width = width;
}
if (height !== null) {
stampAnnot.Height = height;
}
stampAnnot.Custom.imagedata = imageData;
stampAnnot.X = 200;
stampAnnot.Y = dropPos;
// Update this annotation, then redraw
annotManager.updateAnnotation(stampAnnot);
annotManager.addAnnotation(stampAnnot);
annotManager.redrawAnnotation(stampAnnot);
};
`
Am I missing something?
They attach some video to describe this behavior, as well as the troubled document as well, but I have to ask for a permission before show you anything. I can only just provide some of the file’s metadata just in case it could help:
And this is the created XFDF that our custom annotation produced (had the same structure and data, it just failed with this document):
`
<?xml version="1.0" encoding="UTF-8" ?> data:image/png;base64,... `Any feedback will greatly appreciated, TIA!