---
layout: default
title: Crop Image - Crop and Trim Images Online
description: Crop images with interactive editor, preset aspect ratios, and custom dimensions.
permalink: /playground/tools/crop-image/
---

<link rel="stylesheet" href="../shared/tool-layout.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.css"
      integrity="sha384-R5gMiAoOBH5Q9vYNrLtKzMxfscHI1LxLXrCKCUbRvFrAd4Z5+A5u8bRIp8zYnBgW"
      crossorigin="anonymous">

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

    <div class="tool-header">
        <h1>Crop Image</h1>
        <p class="tool-description">Crop and trim images with interactive editor</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 an image or drag it here</div>
            <div class="drop-zone-hint">Supports JPG, PNG, GIF, WebP</div>
        </div>
        <input type="file" id="fileInput" class="file-input" accept="image/*">

        <div id="cropContainer" style="display: none; margin-top: 2rem;">
            <h3>Crop Editor</h3>
            <div style="margin-top: 1rem; max-width: 800px; margin-left: auto; margin-right: auto;">
                <img id="cropImage" style="max-width: 100%; display: block;">
            </div>
        </div>

        <div id="cropControls" style="display: none; margin-top: 2rem;">
            <h3>Aspect Ratio</h3>
            <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; justify-content: center;">
                <button class="btn btn-secondary aspect-btn" data-aspect="free">Free</button>
                <button class="btn btn-secondary aspect-btn" data-aspect="1">1:1 (Square)</button>
                <button class="btn btn-secondary aspect-btn" data-aspect="1.333">4:3</button>
                <button class="btn btn-secondary aspect-btn" data-aspect="1.777">16:9</button>
                <button class="btn btn-secondary aspect-btn" data-aspect="0.666">2:3</button>
                <button class="btn btn-secondary aspect-btn" data-aspect="0.75">3:4</button>
            </div>

            <h3 style="margin-top: 2rem;">Actions</h3>
            <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; justify-content: center;">
                <button id="rotateLeft" class="btn btn-secondary">↶ Rotate Left</button>
                <button id="rotateRight" class="btn btn-secondary">↷ Rotate Right</button>
                <button id="flipH" class="btn btn-secondary">↔️ Flip H</button>
                <button id="flipV" class="btn btn-secondary">↕️ Flip V</button>
                <button id="zoomIn" class="btn btn-secondary">🔍+ Zoom In</button>
                <button id="zoomOut" class="btn btn-secondary">🔍- Zoom Out</button>
                <button id="reset" class="btn btn-secondary">🔄 Reset</button>
            </div>

            <div style="margin-top: 2rem;">
                <h3>Output Format</h3>
                <div style="display: flex; gap: 1rem; margin-top: 1rem; justify-content: center;">
                    <label>
                        <input type="radio" name="outputFormat" value="png" checked>
                        PNG (Lossless)
                    </label>
                    <label>
                        <input type="radio" name="outputFormat" value="jpeg">
                        JPEG
                    </label>
                    <label>
                        <input type="radio" name="outputFormat" value="webp">
                        WebP
                    </label>
                </div>

                <div id="jpegQualityContainer" style="display: none; margin-top: 1rem;">
                    <label for="jpegQuality">JPEG Quality: <span id="qualityValue">85</span>%</label>
                    <input type="range" id="jpegQuality" min="1" max="100" value="85"
                           style="width: 100%; max-width: 300px; display: block; margin: 0.5rem auto;">
                </div>
            </div>
        </div>

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

    <div class="feature-list">
        <h3>Features</h3>
        <ul>
            <li>Interactive crop editor</li>
            <li>Preset aspect ratios (1:1, 4:3, 16:9, etc.)</li>
            <li>Free-form cropping</li>
            <li>Rotate and flip</li>
            <li>Zoom controls</li>
            <li>Multiple output formats (PNG, JPEG, WebP)</li>
            <li>100% client-side processing</li>
            <li>No file uploads - complete privacy</li>
            <li>Works offline</li>
        </ul>
    </div>
</div>

<script src="../shared/tool-utils.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.js"
        integrity="sha384-VHCTDomine3jVvi0NiEUYaZLCfb+wU9tJ4xsMiF04Cqe0YYpJ9h0heSLVZTJlMkN"
        crossorigin="anonymous"></script>
<script src="tool.js"></script>