Online Dummy Placeholder Image Generator & Data URI Converter

Technical Specification: Browser-Based Placeholder Image and Data URI Generator

Core Functionality

This application is a client-side tool designed for web developers, UI/UX designers, and testers. It enables the creation of standard image placeholders (e.g., 300x200 pixels) and converts them instantly into Base64 Data URI strings for direct inclusion in CSS background-image properties or HTML src attributes.

Features List

• Live Preview Canvas: Real-time rendering of changes as users adjust settings.
• Dimension Controls: Input fields for Width and Height (in pixels) with presets for common ratios (16:9, 4:3, 1:1).
• Styling Options: Color pickers for background and text color. Font selection (Sans-serif, Monospace, Serif).
• Text Customization: Input field to override default dimension text with specific labels (e.g., 'Hero Image', 'Avatar').
• Format Export: Options to export as PNG (lossless) or JPEG (customizable quality 0.1 - 1.0).
• Code Export: One-click copy for <img> tags, CSS background-image syntax, or the raw Base64 string.
• Download Utility: Direct browser download button for the generated image file.

Layout & Design

• Theme: Minimalist, high-contrast dashboard. Defaults to system-preference dark mode.
• Grid Structure:
  • Left Column: Controls (Inputs, Pickers, Toggles).
  • Right Column: Live Preview Pane and Output code area.
• Animations: Subtle fade-ins for code blocks when copying. Smooth transition for color picker modal.

Technical Implementation

• Framework: Built using standard HTML5, CSS3 (Tailwind for styling), and Vanilla JavaScript (or React for state management).
• Rendering: Uses the HTML5 <canvas> API to draw text and shapes, then canvas.toDataURL() to generate the string.
• Performance: 100% client-side. No server-side processing, ensuring privacy and speed.
• Accessibility: ARIA labels on all inputs. High contrast color combinations for readability.
• Clipboard: Utilizing navigator.clipboard.writeText for seamless code copying.