---
layout: default
title: Crop PDF - Crop PDF Margins and Areas
description: Crop margins or specific areas from PDF pages in your browser.
permalink: /playground/tools/crop-pdf/
---

<link rel="stylesheet" href="../shared/tool-layout.css">

<div class="tool-wrapper">
    <div class="tool-breadcrumb">
        <a href="/playground/tools/">← Back to Tools</a>
    </div>

    <div class="tool-header">
        <h1>Crop PDF</h1>
        <p class="tool-description">Crop margins or areas from PDF pages</p>
    </div>

    <div id="alert" class="alert"></div>

    <div class="tool-content">
        <div class="drop-zone" id="dropZone">
            <div class="drop-zone-icon">📄</div>
            <div class="drop-zone-text">Click to select a PDF or drag it here</div>
            <div class="drop-zone-hint">Single PDF file only</div>
        </div>
        <input type="file" id="fileInput" class="file-input" accept=".pdf,application/pdf">

        <div id="cropInterface" style="display: none; margin-top: 2rem;">
            <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: start;">
                <!-- Left: Preview -->
                <div>
                    <h3>Selection Preview</h3>
                    <div id="previewContainer" style="position: relative; border: 2px solid var(--tool-border); border-radius: 8px; margin-top: 1rem; background: #f5f5f5; display: inline-block;">
                        <canvas id="pdfCanvas" style="display: block; max-width: 100%;"></canvas>
                        <div id="selectionBox" style="position: absolute; border: 3px solid #0066cc; background: rgba(0, 102, 204, 0.1); display: none; cursor: move;"></div>
                    </div>
                    <div style="margin-top: 1rem; color: var(--tool-text-secondary); font-size: 0.9rem;">
                        Draw a rectangle over the document preview to define the crop area
                    </div>
                </div>

                <!-- Right: Settings -->
                <div style="border: 2px solid var(--tool-border); border-radius: 8px; padding: 1.5rem; background: var(--tool-bg-light);">
                    <h3 style="margin-top: 0;">Settings</h3>

                    <div style="margin: 1.5rem 0; padding: 1rem; border-radius: 8px; background: #fff3e0; border: 1px solid #ff9800;">
                        <div style="font-weight: 600; margin-bottom: 0.5rem;">📐 VISUAL SELECTION</div>
                        <div style="font-size: 0.9rem; color: #666;">
                            Draw a rectangle over the document preview to define the crop area.
                        </div>
                    </div>

                    <div style="margin: 1.5rem 0; padding: 1rem; border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd;">
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <span style="font-weight: 600; color: #666;">STATUS</span>
                            <span id="statusBadge" style="padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.85rem; font-weight: 600; background: #ff9800; color: white;">
                                PENDING SELECTION
                            </span>
                        </div>
                    </div>

                    <button id="resetBtn" class="btn btn-secondary" style="width: 100%; margin-bottom: 1rem;">
                        Reset Area
                    </button>

                    <button id="processBtn" class="btn btn-primary" style="width: 100%;" disabled>
                        Process Now
                    </button>

                    <div style="margin-top: 1rem; text-align: center; font-size: 0.85rem; color: var(--tool-text-secondary);">
                        Processed locally in your browser
                    </div>

                    <div id="applyOptions" style="display: none; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 2px solid var(--tool-border);">
                        <h4 style="margin-top: 0;">Apply To</h4>
                        <select id="applyTo" style="width: 100%; padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px;">
                            <option value="all">All Pages</option>
                            <option value="current">Current Page Only</option>
                        </select>
                    </div>
                </div>
            </div>

            <div style="display: flex; gap: 1rem; margin-top: 1.5rem; justify-content: center; flex-wrap: wrap;">
                <button id="prevPage" class="btn btn-secondary">← Previous</button>
                <span id="pageInfo" style="padding: 0.5rem 1rem; align-self: center;">Page 1 of 1</span>
                <button id="nextPage" class="btn btn-secondary">Next →</button>
            </div>
        </div>

        <div class="btn-group" style="margin-top: 2rem;">
            <button id="clearBtn" class="btn btn-secondary" style="display: none;">
                Clear
            </button>
        </div>

        <div id="progressContainer" style="display: none; margin-top: 1.5rem;">
            <div style="font-weight: 600; margin-bottom: 0.5rem;">Cropping PDF...</div>
            <div class="progress-bar">
                <div id="progressFill" class="progress-fill"></div>
            </div>
            <div id="progressText" style="margin-top: 0.5rem; font-size: 0.9rem; color: var(--tool-text-secondary);"></div>
        </div>
    </div>

    <div class="feature-list">
        <h3>Features</h3>
        <ul>
            <li>Visual crop area selection</li>
            <li>Apply to all pages or single page</li>
            <li>Remove unwanted margins</li>
            <li>Precise crop controls</li>
            <li>Multi-page PDF support</li>
            <li>100% client-side processing</li>
            <li>No file uploads - complete privacy</li>
            <li>Works offline</li>
        </ul>

        <div style="margin-top: 1.5rem; padding: 1rem; border: 1px solid var(--tool-border); border-radius: 8px; background: var(--tool-bg-light);">
            <strong>How to use:</strong> Click and drag on the PDF preview to select the area you want to keep. Everything outside the selection will be cropped out.
        </div>
    </div>
</div>

<script src="../shared/tool-utils.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.min.js"
        integrity="sha384-6RsW+O0eLDetuZS+cLGe0xW5GuwTWcIcCcJg/LCT6S3qLKBXXXxLYzIvEd3KNQxw"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"
        integrity="sha384-TzqKflHZaLYKpKjLG7g3w8zkFSGdTqZB1wXU2/mKXPBqC8AE4V5GV76KxGqKGKGj"
        crossorigin="anonymous"></script>
<script src="tool.js"></script>