kevin
README.md

Image Processor - Wumbo Box

This HTTP endpoint accepts image uploads and adds a centered "wumbo" box overlay to the image.

✅ Working Features

  • 🖼️ Universal Image Support: Accepts any image format (PNG, JPEG, GIF, WebP, etc.)
  • 📦 Smart Box Placement: Automatically centers a "wumbo" box on any image
  • 🎨 Responsive Design: Box size adapts to image dimensions (max 250x100px)
  • 💾 Instant Processing: Client-side processing with immediate download
  • 🌐 User-Friendly Interface: Clean web UI with preview and download options
  • 🔄 Batch Processing: Process multiple images without page reload

Usage

🌐 Web Interface (Recommended)

  1. Visit the endpoint URL in your browser
  2. Select an image file using the file picker
  3. Preview your image before processing
  4. Click "Process Image" button
  5. Download the processed image automatically

🔧 API Usage

For programmatic access, send a POST request with form data:

curl -X POST \
  -F "image=@your-image.jpg" \
  https://your-val-url.web.val.run

The response will be an HTML page that processes and downloads the image.

How it Works

🔄 Processing Pipeline

  1. 📤 Upload: Image uploaded via file input or form data
  2. 🎨 Canvas Processing:
    • Load image into HTML5 Canvas
    • Calculate optimal center position
    • Draw semi-transparent white box with shadow
    • Add "wumbo" text with responsive font sizing
  3. 💾 Output: Convert to PNG blob and trigger download

🎨 Visual Design

  • Box Background: Semi-transparent white (95% opacity)
  • Border: 3px solid dark border (#2c3e50)
  • Shadow: Subtle drop shadow (10px blur, 3px offset)
  • Text: Bold "wumbo" in matching dark color
  • Sizing: Responsive (40% of image width, max 250px wide)

Technical Implementation

  • 🚀 Framework: Pure JavaScript with HTML5 Canvas API
  • 📱 Client-Side: All processing happens in the browser
  • 🔒 Privacy: No server-side image storage
  • ⚡ Performance: Instant processing for typical image sizes
  • 🌍 Compatibility: Works in all modern browsers

Error Handling & Validation

  • ✅ File Type Validation: Only accepts image files
  • ✅ Loading Error Handling: Graceful fallback for corrupted images
  • ✅ User Feedback: Clear status messages throughout process
  • ✅ Browser Compatibility: Fallback messages for unsupported browsers

Example Output

Input: Any image → Output: Same image with centered "wumbo" box overlay

Perfect for memes, watermarking, or just adding some wumbo to your images! 🎉