A block that takes a photo and makes it into a sketch. With a few simple styling adjustment options.
Try now in Telex.
Prompt
Doodle Drawing Converter Overview: Create a WordPress Gutenberg block that converts any uploaded photo into a simple doodle-style line drawing. Uses edge detection algorithms (like Canny edge detection via OpenCV.js or similar lightweight alternatives) to process images entirely client-side with no API costs. Core Functionality: Image to Doodle Conversion:
User uploads any photo or selects from media library Automatic conversion to black and white line drawing style Creates sketch/doodle aesthetic similar to hand-drawn artwork All processing happens in browser using edge detection algorithms
Style Controls:
Line thickness slider (thin to bold lines) Detail level adjustment (simple sketch to detailed drawing) Line darkness/intensity control Optional sketch texture overlay for authentic hand-drawn feel Color options: classic black on white, white on black, or custom color selection
Simple Workflow: Upload image → automatic doodle conversion → adjust style preferences → preview result → save/download Technical Approach: Libraries to Consider:
OpenCV.js (Canny edge detection algorithm - open source, BSD license) Canvas API for image manipulation Simple JavaScript image filters Sobel operator for edge detection (can be implemented simply without heavy library)
Processing Steps:
Convert image to grayscale Apply edge detection algorithm to find outlines Enhance and clean up lines Apply stylistic filters for doodle effect Render on canvas as line drawing
User Interface: Editor Controls:
Image upload/selection area Before/After preview toggle Style preset buttons: "Simple Sketch", "Detailed Drawing", "Comic Style", "Minimalist" Fine-tune sliders for custom adjustments Download processed image button Save to media library option
Block Settings Panel:
Algorithm selection (if multiple available) Edge detection sensitivity Line smoothing options Background color picker Line color picker Export quality settings
WordPress Plugin Directory Compliance: Requirements:
Bundle all JavaScript libraries with plugin (no CDN loading) Use open source libraries only (MIT, BSD, Apache licenses) GPL v2 or later compatible Follow WordPress coding standards All processing client-side for privacy No external API calls No tracking or data collection
Performance:
Lazy load processing library only when block is used Show processing indicator for large images Recommend maximum image size for best performance Optimize library file size (keep under 2-3MB if possible) Cache processed results
User Experience:
Simple one-click conversion with sensible defaults Advanced controls hidden in settings panel Clear before/after comparison Mobile responsive Fast processing (under 3 seconds for typical images) Helpful tooltips explaining each control
Error Handling:
Image format not supported messages File too large warnings Browser compatibility checks Graceful fallback if WebGL unavailable Clear error messages with solutions
Use Cases:
Convert photos to coloring book pages Create sketch-style featured images Generate line art for design projects Transform portraits into artistic drawings Create simple illustrations from photos Generate printable activity sheets
Accessibility:
Keyboard navigation for all controls Screen reader friendly labels Alt text preservation and updates High contrast mode support Focus indicators on interactive elements
Documentation:
Explain how edge detection works simply Show example before/after images List supported image formats Browser requirements Tips for best results (high contrast photos work better) Privacy statement (no uploads to external servers)
Optional Enhancements:
Multiple artistic styles (sketch, comic, watercolor outline, crosshatch) Batch processing for multiple images Animation effect showing conversion process Social sharing with preview Download options (PNG, SVG if possible, PDF)
Success Criteria:
Works with common image formats (JPG, PNG, WebP) Processing completes quickly (2-5 seconds) Produces clean, recognizable line drawings Easy to use with good defaults No ongoing costs or API dependencies Plugin directory approved Lightweight and performant
This block transforms photos into simple doodle-style line art completely free using browser-based image processing algorithms.