/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useRef } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import { PDFDocument } from "https://esm.sh/pdf-lib@1.17.1"; // Conversion constants const INCHES_TO_POINTS = 72; // Precise crop specifications based on pixel measurements const CROP_SPECS = { pageWidth: 595, // Total page width in points pageHeight: 842, // Total page height in points top: { height: 24, // Height to remove from top left: 179, // Left position from top crop width: 206 // Width of top crop }, bottom: { height: 440, // Height to remove from bottom (440px from bottom to top) left: 179, // Left position from bottom crop width: 206 // Width of bottom crop }, left: { width: 179 // Width to remove from left }, right: { width: 181 // Width to remove from right } }; // 3x5 crop specifications const CROP_SPECS_3X5 = { ...CROP_SPECS, // Inherit all original crop specifications pageWidth: 3 * INCHES_TO_POINTS, // 3 inches wide in points pageHeight: 5 * INCHES_TO_POINTS // 5 inches tall in points }; function App() { const [pdfFile, setPdfFile] = useState(null); const [pdfFileName, setPdfFileName] = useState(''); const [errorMessage, setErrorMessage] = useState(null); const [isProcessing, setIsProcessing] = useState({ fourSix: false, threeFive: false, threeFiveOriginal: false }); const fileInputRef = useRef(null); const handleFileUpload = (e) => { const file = e.target.files[0]; if (file) { if (file.type !== 'application/pdf') { setErrorMessage('Please upload a PDF file'); return; } setPdfFile(file); setPdfFileName(file.name); setErrorMessage(null); } }; const handleCrop = async (size) => { if (!pdfFile) { setErrorMessage("Please select a PDF to crop."); return; } setIsProcessing(prev => ({ ...prev, [size]: true })); setErrorMessage(null); try { const formData = new FormData(); formData.append('pdf', pdfFile); formData.append('size', size); const response = await fetch('/crop', { method: 'POST', body: formData }); if (!response.ok) { const errorText = await response.text(); throw new Error(`Crop request failed: ${errorText}`); } const arrayBuffer = await response.arrayBuffer(); if (!arrayBuffer || arrayBuffer.byteLength === 0) { throw new Error('Received empty PDF'); } const blob = new Blob([arrayBuffer], { type: 'application/pdf' }); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = size === 'fourSix' ? 'cropped_document_4x6.pdf' : (size === 'threeFive' ? 'cropped_document_3x5.pdf' : 'original_document_3x5.pdf'); document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); setErrorMessage(null); } catch (cropError) { console.error("Crop error:", cropError); setErrorMessage(`Failed to crop PDF: ${cropError.message}`); } finally { setIsProcessing(prev => ({ ...prev, [size]: false })); } }; return (

📄 PDF Cropper

{errorMessage && (

{errorMessage}

)}

{pdfFileName && (

Selected: {pdfFileName}

)}

ℹ️ Crops PDF to 4x6, 3x5, or Original 3x5 sizes

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { if (request.method === 'POST' && new URL(request.url).pathname === '/crop') { try { const formData = await request.formData(); const pdfFile = formData.get('pdf') as File; const size = formData.get('size') as string; const arrayBuffer = await pdfFile.arrayBuffer(); const pdfDoc = await PDFDocument.load(arrayBuffer); // Create a new PDF with precise cropping const newPdfDoc = await PDFDocument.create(); for (let i = 0; i < pdfDoc.getPageCount(); i++) { const originalPage = pdfDoc.getPage(i); // Get original page dimensions const mediaBox = originalPage.getMediaBox(); // Select crop specifications based on size const CURRENT_CROP_SPECS = size === 'threeFive' ? CROP_SPECS_3X5 : (size === 'threeFiveOriginal' ? { ...CROP_SPECS, pageWidth: 3 * INCHES_TO_POINTS, pageHeight: 5 * INCHES_TO_POINTS } : CROP_SPECS); // Calculate precise crop coordinates const cropBox = { // X start point after left crop x: CURRENT_CROP_SPECS.left.width, // Y start point (24 pixels from top) y: CURRENT_CROP_SPECS.top.height, // Remaining width after left and right crops width: size === 'threeFive' || size === 'threeFiveOriginal' ? CURRENT_CROP_SPECS.pageWidth : (mediaBox.width - (CURRENT_CROP_SPECS.left.width + CURRENT_CROP_SPECS.right.width)), // Remaining height height: size === 'threeFive' || size === 'threeFiveOriginal' ? CURRENT_CROP_SPECS.pageHeight : (mediaBox.height - (CURRENT_CROP_SPECS.top.height + CURRENT_CROP_SPECS.bottom.height)) }; // Create a new page with calculated dimensions const newPage = newPdfDoc.addPage([ cropBox.width, // Width in points cropBox.height // Height in points ]); // Embed the original page with precise cropping const embeddedPage = await newPdfDoc.embedPage(originalPage, { left: cropBox.x, bottom: size !== 'fourSix' ? 0 : CURRENT_CROP_SPECS.bottom.height, right: cropBox.x + cropBox.width, top: size !== 'fourSix' ? CURRENT_CROP_SPECS.pageHeight : (mediaBox.height - CURRENT_CROP_SPECS.bottom.height) }); // Draw the embedded page content newPage.drawPage(embeddedPage, { x: 0, y: 0, width: cropBox.width, height: cropBox.height }); } const pdfBytes = await newPdfDoc.save(); return new Response(pdfBytes, { headers: { 'Content-Type': 'application/pdf', 'Content-Disposition': `attachment; filename=cropped_document_${ size === 'fourSix' ? '4x6' : size === 'threeFive' ? '3x5' : 'original_3x5' }.pdf` } }); } catch (serverError) { console.error("Server-side crop error:", serverError); return new Response(`Error processing PDF: ${serverError.message}`, { status: 500 }); } } return new Response(` PDF Cropper

`, { headers: { 'Content-Type': 'text/html' } }); }

Murtaza