Technical Specification: Free Online EXIF Data Viewer and Metadata Remover

Overview

This single-file application is a privacy-first utility that allows users to inspect and sanitize images by removing embedded metadata (EXIF, IPTC, XMP). It operates entirely client-side using JavaScript, ensuring no data ever leaves the user's browser.

Core Features

• Client-Side Processing: Zero server interaction. All parsing occurs in memory.
• Drag-and-Drop Interface: Seamless file handling with visual feedback.
• Metadata Inspection: A detailed table rendering every readable tag (Camera Make, Model, Exposure, Focal Length, GPS Data, etc.).
• Privacy Stripper: One-click download of the "Cleaned" image, which is reconstructed without the metadata headers.
• Image Preview: Embedded thumbnail preview of the processed file.

User Interface & Design

• Aesthetic: Modern, "SaaS-clean" look. Light gray backgrounds (#F9FAFB), white cards (#FFFFFF) with subtle drop-shadows (0 4px 6px -1px rgb(0 0 0 / 0.1)).
• Palette: Primary action color (Deep Blue: #2563EB), Success/Download color (Emerald: #059669), and Neutral Gray text (#374151).
• Layout:
  • Header: Clear, minimal title and description.
  • Drop Zone: Large, dashed-border area to drag-and-drop or click-to-upload.
  • Processing State: Skeleton loaders for metadata table while parsing.
  • Results Section: Split-pane view. Left: Image Preview. Right: Metadata List with a "Download Clean Image" button.
• Animations: CSS transitions for fade-in effects on results, smooth hover states on buttons, and a rotating spinner for processing states.

Technical Implementation Constraints

• Architecture: Everything inside one HTML file. Use CDN links for libraries like exif-js for metadata parsing.
• Data Management:
  • DO NOT use localStorage or any browser storage (Session/IndexedDB).
  • State is managed strictly in JavaScript object variables.
• Performance: Use FileReader API for fast local processing. Handle large image files by optimizing memory usage during the Blob conversion process.
• Responsiveness: Use Tailwind CSS for mobile-first grid layouts. Ensure the metadata table has horizontal scrolling on narrow screens.
• Security: The app must handle files safely without triggering cross-origin issues. Ensure no external requests are made during the metadata cleaning process.

Interaction Flow

1. Upload: User drags file into the Drop Zone.
2. Parsing: App parses file blob in memory using exif-js.
3. Display: UI updates to show the metadata table and image preview.
4. Action: User clicks "Download Clean Image".
5. Reconstruction: App reads image pixels, creates a new Blob without metadata header, and triggers a download via an anchor tag element.