Free Online Image Pixelator & Censor Tool

Overview

A high-performance, browser-native utility designed to redact, blur, or pixelate sensitive information in images (faces, text, license plates) without ever uploading user data to a server.

Core Features

• Drag-and-Drop Interface: Users can easily drop an image file directly onto the canvas area.
• Dual Editing Modes:
  • Pixelate: Adjust pixel block size (e.g., 4x4 to 50x50).
  • Blur: Adjust blur radius (gaussian blur intensity).
• Selective Area Tool: A marquee tool that allows users to select specific regions to process.
• Real-Time Preview: View changes instantly on the canvas without lag.
• Export: High-quality PNG/JPEG download button.
• Undo/Redo: In-memory state tracking to step back through editing history (stack-based).

Technical Constraints & Requirements

• Single File Architecture: All logic (JS), styling (CSS), and markup (HTML) must reside in one file.
• Zero External Storage: Do NOT use localStorage, sessionStorage, cookies, or IndexedDB. All application state (image data, edit history) must be maintained in JavaScript memory objects.
• Canvas API: The primary engine is the HTML5 Canvas 2D API.
• Responsive UI: The canvas must resize dynamically based on the device width, maintaining aspect ratio.
• No Popups: Use CSS-based modal overlays for instructions or error messages (e.g., "File too large").

UI/UX Design Specification

• Color Palette: A professional "SaaS" light-mode aesthetic:
  • Primary: #2563eb (Vibrant Blue for buttons/actions)
  • Neutral: #f8fafc (App background), #ffffff (Panel backgrounds)
  • Text: #1e293b (Primary text), #64748b (Secondary text)
  • Borders/Dividers: #e2e8f0
• Layout Structure:
  • Header: Title and "About" link.
  • Toolbar (Top): Tool selector (Brush/Marquee), Mode (Blur/Pixelate), Intensity slider, Undo/Redo/Download buttons.
  • Workspace (Center): Centered canvas container with a soft drop-shadow and a subtle checkered background (to indicate transparency).
  • Guidance (Sidebar): Helpful tips on how to use the tool effectively.

Interaction Design

• Micro-interactions: Buttons should have a subtle scale-down effect on click (CSS transform) and smooth hover transitions.
• Feedback: When an image is dragged, a "drop zone" highlight effect must appear on the workspace area.
• Performance: Image rendering should occur in a requestAnimationFrame loop to ensure 60fps interaction during brush or slider movements.