I need to get the orientation of lower left x and lower left y, from the pdf in some cases and it’s simple but there are cases in which the pdf has a different orientation when exported, in which case the dimensions are difficult to calculate,
I can only get that the document has a different orientation when I insert a stamp it comes upside down.
even so I have to do some math to find the position, there is no better way to do this
llx: lower left x
lly: lower left y
annotManager.addEventListener('annotationChanged', async (annots, action, event) => {
annots.forEach((el) => {
if (el.cA === this.stampId) {
const doc = this.docViewer.getDocument();
const {X, Y, Width, Height, PageNumber, Rotation} = el;
const {width, height} = doc.getPageInfo(PageNumber);
const page = {
number: PageNumber,
width: Math.round(width),
height: Math.round(height)
};
let image = {
width: Math.round(Width),
height: Math.round(Height)
};
let margin = {
llx: Math.round(page.width - (X + image.width)),
lly: Math.round(page.height - (Y + image.height)),
};
if (Rotation === 90) {
image = {
width: image.height,
height: image.width
};
margin = {
llx: Math.round(Y),
lly: Math.round(page.height - (X + image.height)),
};
}
this.coordinates = {margin, image, page};
console.log(this.coordinates);
}
});
});
a2.pdf (1.4 MB)
a2_rotated.pdf (20.9 KB)
Hey elvisdosreis,
The page coordinate system is odd in a way, where the 0,0 depends on the rotation of the page, this means that the coordinates do not care about the rotation. For example, if you access (100, 200) in PDF coordinates the resulting area would be the same regardless of rotation
I would convert any X and Y values you are using to PDF page coordinates using
displayMode.windowToPage(coords, pageNumber)
Best regards,
Tyler
I believe that windowToPage will not help me because it is affected by the zoom of the page and I don’t know how it would help me to return an llx and lly, I need these pixel values because I will use these coordinates in another program in C# iTextSharp to create a rectangle
Rectangle(float llx, float lly, float urx, float ury)
annots.forEach((el) => {
if (el.cA === this.stampId) {
const {X, Y, Width, Height, PageNumber, Rotation} = el;
const annotCoord = {x: X, y: Y};
const displayMode = docViewer.getDisplayModeManager().getDisplayMode();
const annotCoordinates = displayMode.windowToPage(annotCoord, PageNumber);
console.log('annotCoordinates', annotCoordinates);
}
});
Hello elvisdosreis,
Putting an annotation on the document like so
rectangleAnnot.X = 100;
rectangleAnnot.Y = 100;
rectangleAnnot.Width = 100;
rectangleAnnot.Height = 100;
will put the annotation at the correct spot, no matter the rotation
I have attached a sample project, can you check it out?
pdfjs-express-react-sample-master 2.zip (1.0 MB)
I could be misunderstanding the requirement here, my apologies.
Best regards,
Tyler
@tyler my doubt is not the one you posted, but finding the position of the lower right margin as shown in the attached image, regardless of whether the file is landscape or portrait or if the pdf was rotated by another program that did not record the orientation correctly from the pdf
Hello elvisdosreis,
Wouldnt the lower right position just be the starting point of the annotation plus its with and height?
X = 100, Y=100, Width=100, height=100
would mean
Bottom Right = (200,200)?
but again if you’re using PDF coordinates the rotation does not matter
Best regards,
Tyler Gordon
I got the correct coordinates but only after making some adjustments to the annotation, initially when it loads I don’t have the correct information.
the file has a boot of 2, how do I read this file property?
const viewer = useRef(null);
// if using a class, equivalent of componentDidMount
useEffect(() => {
WebViewer(
{
path: '/webviewer/lib',
// initialDoc: '/files/demo-annotated-0.pdf',
initialDoc: '/files/demo-annotated-90.pdf',
},
viewer.current,
).then((instance) => {
const {docViewer, Annotations} = instance;
const annotManager = docViewer.getAnnotationManager();
docViewer.on('documentLoaded', () => {
const rectangleAnnot = new Annotations.RectangleAnnotation();
rectangleAnnot.PageNumber = 1;
const doc = docViewer.getDocument();
const {width, height} = doc.getPageInfo(1);
console.log(width, height);
// values are in page coordinates with (0, 0) in the top left
rectangleAnnot.X = height - 100;
rectangleAnnot.Y = 2;
rectangleAnnot.Width = 100;
rectangleAnnot.Height = 100;
rectangleAnnot.Author = annotManager.getCurrentUser();
annotManager.addAnnotation(rectangleAnnot);
// need to draw the annotation otherwise it won't show up until the page is refreshed
annotManager.redrawAnnotation(rectangleAnnot);
});
annotManager.addEventListener('annotationChanged', async (items, action, event) => {
setTimeout(() => {
const doc = docViewer.getDocument();
items.forEach((el) => {
const {X, Y, Width, Height, PageNumber, Rotation} = el;
const page = Object.assign({width: 0, height: 0, page: PageNumber}, doc.getPageInfo(PageNumber));
const annot = {width: Width, height: Height, rotation: Rotation};
const coordinate = {llx: page.height - (X + Width), lly: Y, width: Width, height: Height};
console.log('page', page);
console.log('annot', annot);
console.log('coordinate', coordinate);
});
}, 300)
});
});
}, []);
I’m finding it difficult to work when the document is rotated, when inserting a stamp it will insert it in the rotation. you have to apply a logic to invert the height and width
WebViewer(
{
path: '/webviewer/lib',
// initialDoc: '/files/demo-annotated-0.pdf',
initialDoc: '/files/demo-annotated-90.pdf',
},
viewer.current,
).then((instance) => {
const {docViewer, Annotations} = instance;
const annotManager = docViewer.getAnnotationManager();
docViewer.on('documentLoaded', async () => {
const stampAnnot = new Annotations.StampAnnotation();
stampAnnot.PageNumber = 1;
const doc = docViewer.getDocument();
const {width, height} = doc.getPageInfo(1);
console.log(width, height);
// values are in page coordinates with (0, 0) in the top left
stampAnnot.X = height - 320;
stampAnnot.Y = 2;
stampAnnot.Width = 320;
stampAnnot.Height = 190;
stampAnnot.Author = annotManager.getCurrentUser();
//stampAnnot.Rotation = 0;
stampAnnot.ImageData = 'https://upload.wikimedia.org/wikipedia/commons/a/ad/Wonho-Signature.svg';
annotManager.addAnnotation(stampAnnot);
// need to draw the annotation otherwise it won't show up until the page is refreshed
annotManager.redrawAnnotation(stampAnnot);
});
annotManager.addEventListener('annotationChanged', async (items, action, event) => {
setTimeout(() => {
const doc = docViewer.getDocument();
items.forEach((el) => {
console.log(el);
const {X, Y, Width, Height, PageNumber, Rotation} = el;
const page = Object.assign({
width: 0,
height: 0,
page: PageNumber
}, doc.getPageInfo(PageNumber));
let annot = {width: Width, height: Height, rotation: Rotation};
const coordinate = {llx: page.height - (X + Width), lly: Y, width: Width, height: Height};
console.log('page', page);
console.log('annot', annot);
console.log('coordinate', coordinate);
if(annot.rotation === 90) {
annot = {width: Height, height: Width, rotation: Rotation};
}
console.log('real annot', annot);
});
}, 300)
});
});
I have trouble using this file where it has a totally different orientation, could you please help me.
I pay dearly for the monthly license, but the pdf could have a function that correctly returns these coordinates regardless of the orientation of the document
DIEGO SOARES 2º ANALISE.pdf (749.4 KB)
Hi elvisdosreis,
The document that you posted has an internal rotation of 270,
To get the internal rotation of the document you have to do:
documentViewer.getCompleteRotation(pageNumber);
If you could provide a sample project, maybe this would clear up the confusion.
Best regards,
Tyler
