Issues calculating viewer coordinates for a rotated PDF page. #1725

sameer-roofr · 2025-02-10T19:34:54Z

sameer-roofr
Feb 10, 2025

I have a service that accepts annotations with coordinates and dimensions and places them on a PDF page. Standard functions like page.drawRectangle and pdfPage.drawText work correctly with some adjustments. However, when working with a rotated PDF page, I am facing challenges.

Specifically, the PDF coordinates and viewer coordinates differ, which is expected. To address this, I wrote a wrapper function to convert PDF coordinates to viewer coordinates. However, I noticed that when a PDF page is rotated, the library still returns the original (unrotated) dimensions via page.getSize(). For example, if a rotated page appears as 1000x800 in the viewer, page.getSize() still returns 800x1000 (its original dimensions at 0 degrees).

Is there a way to get the viewer coordinates or the correctly rotated dimensions for a PDF page instead of the original unrotated values?

tldr; I want to know how to get viewer coordinates, origin (0,0) is top-left, for rotated PDF pages.

kitzj · 2025-06-11T17:19:09Z

kitzj
Jun 11, 2025

I was struggling with the same thing, and I was able to come up with this demo that should work. I also realized the hard way that despite page rotation, the dimensions and orientation don't change.

Define the coordinates (as xCoord and yCoord below) from the perspective that 0,0 is always in the upper left visually, regardless of a page's rotation. For 0, 90, 180 and 270 degree rotation, the image should show up at the same coordinates visually at any of these rotations.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image to Rotated PDF</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            background-color: #f0f0f0;
        }
        #container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            text-align: center;
        }
        #preview {
            max-width: 300px;
            max-height: 300px;
            margin: 10px 0;
            display: none;
        }
        #rotateBtn, #downloadBtn {
            padding: 10px 20px;
            margin: 5px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #007bff;
            color: white;
            font_size: 16px;
        }
        #rotateBtn:hover, #downloadBtn:hover {
            background-color: #0056b3;
        }
        #downloadBtn:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        #rotationInfo {
            margin: 10px 0;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="container">
        <h2>Upload Image and Create Rotated PDF</h2>
        <input type="file" id="imageInput" accept="image/*">
        <img id="preview" alt="Image Preview">
        <div id="rotationInfo">Current Rotation: 0°</div>
        <button id="rotateBtn">Rotate 90°</button>
        <button id="downloadBtn" disabled>Download PDF</button>
    </div>

    <script src="https://unpkg.com/[email protected]/dist/pdf-lib.min.js"></script>
    <script>
        const imageInput = document.getElementById('imageInput');
        const preview = document.getElementById('preview');
        const rotateBtn = document.getElementById('rotateBtn');
        const downloadBtn = document.getElementById('downloadBtn');
        const rotationInfo = document.getElementById('rotationInfo');
        let imageData = null;
        let currentRotation = 0;

        // Handle image upload
        imageInput.addEventListener('change', async (e) => {
            const file = e.target.files[0];
            if (file && file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = (event) => {
                    imageData = event.target.result;
                    preview.src = imageData;
                    preview.style.display = 'block';
                    downloadBtn.disabled = false;
                };
                reader.readAsDataURL(file);
            }
        });

        // Handle rotation
        rotateBtn.addEventListener('click', () => {
            currentRotation = (currentRotation + 90) % 360;
            rotationInfo.textContent = `Current Rotation: ${currentRotation}°`;
        });

        // Handle PDF download
        downloadBtn.addEventListener('click', async () => {
            if (!imageData) return;

            const { PDFDocument, degrees } = PDFLib;
            const pdfDoc = await PDFDocument.create();
            const page = pdfDoc.addPage([595, 842]); // A4 size in points
            page.setRotation(degrees(currentRotation));

            // Load image
            const img = await fetch(imageData).then(res => res.arrayBuffer());
            let pdfImage;
            if (imageData.includes('image/jpeg')) {
                pdfImage = await pdfDoc.embedJpg(img);
            } else if (imageData.includes('image/png')) {
                pdfImage = await pdfDoc.embedPng(img);
            } else {
                alert('Unsupported image format. Please use JPEG or PNG.');
                return;
            }

            // Image dimensions
            const { width, height } = pdfImage;
            const scale = Math.min(200 / width, 200 / height);
            const scaledWidth = width * scale;
            const scaledHeight = height * scale;

            // Set position and rotation based on page rotation
            let x, y, imgRotation;
            const pageWidth = page.getWidth();
            const pageHeight = page.getHeight();

            //These are your coordinates from the orientation as if the top left of the page is 0,0
            const xCoord = 50;
            const yCoord = 100;       
    
            switch (currentRotation) {
                case 0:
                    x = xCoord;
                    y = pageHeight - scaledHeight - yCoord;
                    imgRotation = 0;
                    break;
                case 90:
                    x = scaledHeight + yCoord;
                    y = xCoord;
                    imgRotation = -90;
                    break;
                case 180:
                    x = pageWidth - xCoord;
                    y = scaledHeight + yCoord;
                    imgRotation = -180;
                    break;
                case 270:
                    x = pageWidth - scaledHeight - yCoord;
                    y = pageHeight - xCoord;
                    imgRotation = -270;
                    break;
            }

            // Correct flipping for 90° and 270°
            if (currentRotation === 90 || currentRotation === 270) {
                imgRotation += 180;
            }

            // Draw image
            page.drawImage(pdfImage, {
                x,
                y,
                width: scaledWidth,
                height: scaledHeight,
                rotate: degrees(imgRotation),
            });

            // Save and download PDF
            const pdfBytes = await pdfDoc.save();
            const blob = new Blob([pdfBytes], { type: 'application/pdf' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = 'rotated_image.pdf';
            link.click();
            URL.revokeObjectURL(url);
        });
    </script>
</body>
</html>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Issues calculating viewer coordinates for a rotated PDF page. #1725

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

Issues calculating viewer coordinates for a rotated PDF page. #1725

Uh oh!

sameer-roofr Feb 10, 2025

Replies: 1 comment

Uh oh!

Uh oh!

kitzj Jun 11, 2025

sameer-roofr
Feb 10, 2025

kitzj
Jun 11, 2025