Technical Specification: Free Online Image Aspect Ratio Cropper & Resizer

Overview

This single-file application allows users to crop and resize images for specific social media aspect ratios. The tool is designed for high performance, ease of use, and privacy, running entirely client-side without a server backend.

Core Features

• Drag-and-Drop Interface: Intuitive file selection zone for instant loading.
• Preset Aspect Ratios: One-click buttons to lock the cropping frame to popular dimensions (1:1, 4:5, 16:9, 2:3, 9:16).
• Interactive Cropping Canvas: Real-time preview with draggable/resizable selection box using touch and mouse support.
• Export Controls: Ability to download the cropped image as PNG or JPEG without metadata processing delays.
• Zero-Storage Logic: No data is saved; the app clears the image state upon browser refresh or tab closure.

UI Layout Design

• Header: Minimalist top navigation with the tool title and a "How it Works" dropdown modal.
• Main Tool Area: A centered, two-pane layout:
  • Left/Top Pane: Image canvas area for the interactive crop box.
  • Right/Bottom Pane: Control panel featuring ratio presets, zoom controls, and a prominent "Download Cropped Image" button.
• Responsive Behavior: Stack panes vertically on mobile devices and horizontally on desktop screens to maximize workspace.

Color Palette (Light Mode Only)

• Background: #FFFFFF (Primary surface)
• Secondary Surface: #F8FAFC (Control panel background)
• Primary Accent: #3B82F6 (Action buttons and highlights)
• Text/Labels: #1E293B (Dark slate for high readability)
• Borders/Dividers: #E2E8F0 (Subtle separation)

Animations & Transitions

• Entrance: Smooth fade-in (0.3s) for the image canvas once the file is loaded.
• Interactions: Button hover effects featuring subtle elevation (box-shadow) and color darkening.
• Feedback: A localized loading spinner animation when the image is initially rendered or the final crop is processed.

Technical Constraints & Directives

• Architecture: Single HTML file containing CSS in <style> tags and JavaScript in <script> tags.
• Sandbox Compatibility:
  • NO localStorage, sessionStorage, or IndexedDB. State must be handled in memory variables.
  • NO alerts/prompts. Use custom modal elements within the DOM for instructions or errors.
  • NO external build tools. Use CDNs for lightweight libraries (e.g., cropperjs for the cropping engine).
• External Assets: Any external script or icon library must be linked via HTTPS CDN with appropriate security headers (no integrity hashes strictly required but recommended).
• Performance: Ensure the canvas engine is properly destroyed and memory is released if a user swaps out the image.