Image Processing Skill
Image handling standards and best practices for frontend applications.
When to Apply
- •Uploading images
- •Processing image data
- •Canvas manipulation
- •Format conversion
- •Coordinate calculations
Image Source Types
| Source | Format | Typical Use Case |
|---|---|---|
| User upload | File object | Form file inputs |
| Remote URL | String URL | External images |
| API response | base64 / URL | AI generation, backend |
| Canvas | HTMLCanvasElement | Drawing, manipulation |
| Clipboard | Blob / File | Paste operations |
File Validation Standards
Allowed Types
| Type | MIME | Extension |
|---|---|---|
| JPEG | image/jpeg | .jpg, .jpeg |
| PNG | image/png | .png |
| WebP | image/webp | .webp |
| GIF | image/gif | .gif (if animations supported) |
Size Limits
| Limit | Recommended Value |
|---|---|
| Max file size | 10 MB |
| Max dimensions | 4096 x 4096 px |
| Min dimensions | 100 x 100 px |
Validation Checklist
- • File type in allowed list
- • File size under limit
- • Image loads successfully
- • Dimensions within bounds
Format Conversion Guidelines
Conversion Methods
| From | To | Method |
|---|---|---|
| File | base64 | FileReader.readAsDataURL |
| base64 | Blob | fetch(base64).blob() |
| Blob | base64 | FileReader.readAsDataURL |
| URL | Blob | fetch(url).blob() |
| Canvas | Blob | canvas.toBlob() |
| Canvas | base64 | canvas.toDataURL() |
Quality Settings
| Format | Quality Parameter | Recommended |
|---|---|---|
| JPEG | 0.0 - 1.0 | 0.85 - 0.95 |
| PNG | N/A (lossless) | N/A |
| WebP | 0.0 - 1.0 | 0.80 - 0.90 |
Dimension Handling
Aspect Ratio Calculations
| Scenario | Formula |
|---|---|
| Scale to fit width | height = width / aspectRatio |
| Scale to fit height | width = height * aspectRatio |
| Aspect ratio | width / height |
Letterboxing (Object-Fit: Contain)
| Image Aspect | Container Aspect | Result |
|---|---|---|
| Wider | Narrower | Letterbox top/bottom |
| Taller | Wider | Letterbox left/right |
| Equal | Equal | No letterbox |
Coordinate Systems
| System | Origin | Use Case |
|---|---|---|
| Natural | Top-left of image | Original image pixels |
| Rendered | Top-left of container | Display coordinates |
| Percentage | 0-100% | Relative positioning |
Canvas Standards
Canvas Operations
| Operation | Consideration |
|---|---|
| Create canvas | Set width/height before drawing |
| Get context | Use '2d' for image manipulation |
| Draw image | Use naturalWidth/naturalHeight for source |
| Export | Use toBlob for file operations |
Canvas Performance
| Guideline | Description |
|---|---|
| Minimize redraws | Batch operations, use requestAnimationFrame |
| Limit canvas size | Max ~4096x4096 on most devices |
| Clean up | Remove canvas from DOM when done |
| Offscreen canvas | Use for heavy processing |
API Integration Standards
FormData for Image Upload
| Field | Description |
|---|---|
image / image[] | Image blob(s) |
filename | Descriptive filename |
Content-Type | Automatically set by FormData |
Image API Response Handling
| Response Type | Handling |
|---|---|
| base64 string | Direct use in img src |
| URL | Fetch and convert if needed |
| Binary | Convert to Blob |
Error Handling Standards
Error Types
| Error | Cause | User Message |
|---|---|---|
| Invalid type | Wrong file extension | "Please upload a JPEG, PNG, or WebP image" |
| Too large | Exceeds size limit | "Image must be under 10MB" |
| Load failed | Corrupt or network error | "Failed to load image" |
| Process failed | Canvas/conversion error | "Failed to process image" |
Error Handling Guidelines
| Guideline | Description |
|---|---|
| Validate early | Check type/size before processing |
| User-friendly messages | No technical details |
| Graceful degradation | Provide fallback/retry option |
| Log details | Console.error with context for debugging |
Performance Guidelines
DO
- •Validate file type/size before processing
- •Use Blob URLs for display (
URL.createObjectURL) - •Revoke Blob URLs when done (
URL.revokeObjectURL) - •Process large images in Web Workers
- •Use appropriate compression for uploads
DON'T
- •Load full-resolution images for thumbnails
- •Keep unused Blob URLs in memory
- •Block UI thread with heavy processing
- •Skip dimension validation
- •Store images in state as base64 (use Blob URLs)
Browser Compatibility
Feature Support
| Feature | Support |
|---|---|
| FileReader | All modern browsers |
| Canvas | All modern browsers |
| Blob | All modern browsers |
| createImageBitmap | Most modern (check Safari) |
| OffscreenCanvas | Partial (check before use) |
Mobile Considerations
| Consideration | Recommendation |
|---|---|
| Camera uploads | Accept image/* capture |
| Memory limits | Process images in chunks |
| Orientation | Check EXIF, rotate if needed |
| Touch gestures | Consider pinch-zoom for canvas |
Code Review Checklist
- • File type validation implemented
- • File size validation implemented
- • Blob URLs properly revoked
- • Error handling with user-friendly messages
- • Canvas properly sized and cleaned up
- • No base64 strings in component state
- • Async operations properly handled
- • Memory leaks prevented