AmalJossy · December 6, 2024 11:22
diff --git a/pdf-coordinates.html b/pdf-coordinates.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PDF Viewer with Coordinates</title>
    <style>
      body,
      html {
        margin: 0;
        padding: 0;
      }
      #pdfContainer {
        position: relative;
        width: 100%;
        height: 100%;
      }
      canvas {
        outline: solid 1px black;
        display: block;
        margin: 0 auto;
      }
      #coordinates {
        position: fixed;
        bottom: 10px;
        left: 10px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <div id="pdfContainer">
      <canvas id="pdfCanvas"></canvas>
    </div>
    <div id="coordinates">X: 0, Y: 0</div>

    <!-- Include PDF.js via CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.9.179/pdf.min.js"></script>
    <script>
      const pdfUrl = './PRF.pdf'; // Replace with your PDF file URL
      const pdfjsLib = window['pdfjs-dist/build/pdf'];

      const canvas = document.getElementById('pdfCanvas');
      const context = canvas.getContext('2d');
      const coordinatesDisplay = document.getElementById('coordinates');

      pdfjsLib
        .getDocument(pdfUrl)
        .promise.then((pdf) => pdf.getPage(1)) // Load the first page
        .then((page) => {
          // Get the actual PDF dimensions in points
          const viewport = page.getViewport({ scale: 1 }); // Scale 1 gives the actual PDF dimensions
          const pdfWidth = viewport.width; // Actual width in points
          const pdfHeight = viewport.height; // Actual height in points

          // Scale the viewport for rendering
          const renderViewport = page.getViewport({ scale: 1.5 }); // Scale for better visibility
          canvas.width = renderViewport.width;
          canvas.height = renderViewport.height;

          // Render the page
          const renderContext = {
            canvasContext: context,
            viewport: renderViewport,
          };
          page.render(renderContext);

          // Add mouse event listener for coordinates
          canvas.addEventListener('mousemove', (event) => {
            const rect = canvas.getBoundingClientRect();

            // Get canvas coordinates
            const canvasX = event.clientX - rect.left;
            const canvasY = event.clientY - rect.top;

            // Map canvas coordinates to PDF coordinates
            const pdfX = (canvasX / canvas.width) * pdfWidth;
            const pdfY = pdfHeight - (canvasY / canvas.height) * pdfHeight; // Invert Y for bottom-left origin

            coordinatesDisplay.textContent = `PDF Coordinates: X: ${pdfX.toFixed(
              2
            )}, Y: ${pdfY.toFixed(2)}`;
          });

          canvas.addEventListener('mouseout', () => {
            coordinatesDisplay.textContent = `PDF Coordinates: X: 0, Y: 0`;
          });
        })
        .catch((error) => {
          console.error('Error loading PDF:', error);
        });
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>PDF Viewer with Coordinates</title>
	<style>
	body,
	html {
	margin: 0;
	padding: 0;
	}
	#pdfContainer {
	position: relative;
	width: 100%;
	height: 100%;
	}
	canvas {
	outline: solid 1px black;
	display: block;
	margin: 0 auto;
	}
	#coordinates {
	position: fixed;
	bottom: 10px;
	left: 10px;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 5px 10px;
	border-radius: 5px;
	font-size: 14px;
	}
	</style>
	</head>
	<body>
	<div id="pdfContainer">
	<canvas id="pdfCanvas"></canvas>
	</div>
	<div id="coordinates">X: 0, Y: 0</div>

	<!-- Include PDF.js via CDN -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.9.179/pdf.min.js"></script>
	<script>
	const pdfUrl = './PRF.pdf'; // Replace with your PDF file URL
	const pdfjsLib = window['pdfjs-dist/build/pdf'];

	const canvas = document.getElementById('pdfCanvas');
	const context = canvas.getContext('2d');
	const coordinatesDisplay = document.getElementById('coordinates');

	pdfjsLib
	.getDocument(pdfUrl)
	.promise.then((pdf) => pdf.getPage(1)) // Load the first page
	.then((page) => {
	// Get the actual PDF dimensions in points
	const viewport = page.getViewport({ scale: 1 }); // Scale 1 gives the actual PDF dimensions
	const pdfWidth = viewport.width; // Actual width in points
	const pdfHeight = viewport.height; // Actual height in points

	// Scale the viewport for rendering
	const renderViewport = page.getViewport({ scale: 1.5 }); // Scale for better visibility
	canvas.width = renderViewport.width;
	canvas.height = renderViewport.height;

	// Render the page
	const renderContext = {
	canvasContext: context,
	viewport: renderViewport,
	};
	page.render(renderContext);

	// Add mouse event listener for coordinates
	canvas.addEventListener('mousemove', (event) => {
	const rect = canvas.getBoundingClientRect();

	// Get canvas coordinates
	const canvasX = event.clientX - rect.left;
	const canvasY = event.clientY - rect.top;

	// Map canvas coordinates to PDF coordinates
	const pdfX = (canvasX / canvas.width) * pdfWidth;
	const pdfY = pdfHeight - (canvasY / canvas.height) * pdfHeight; // Invert Y for bottom-left origin

	coordinatesDisplay.textContent = `PDF Coordinates: X: ${pdfX.toFixed(
	2
	)}, Y: ${pdfY.toFixed(2)}`;
	});

	canvas.addEventListener('mouseout', () => {
	coordinatesDisplay.textContent = `PDF Coordinates: X: 0, Y: 0`;
	});
	})
	.catch((error) => {
	console.error('Error loading PDF:', error);
	});
	</script>
	</body>
	</html>