• Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
kevin

kevin

untitled-1613

Public
Like
untitled-1613
Home
Code
3
README.md
H
index.ts
main.ts
Branches
1
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
Code
/
Search
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! πŸŽ‰

Code
README.md
H
index.ts
main.ts
FeaturesVersion controlCode intelligenceCLIMCP
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Open Source Pledge
Terms of usePrivacy policyAbuse contact
Β© 2026 Val Town, Inc.