A modern implementation of the Canny Edge Detection algorithm in ES6 JavaScript. This project provides a powerful and efficient way to detect edges in images directly in the browser.
- Modern JavaScript - Built with ES6+ features for better code organization and performance
- Web Worker Support - Processes images in a separate thread to maintain UI responsiveness
- Service Worker Integration - Enables offline functionality and faster loading times
- Real-time Processing - See edge detection results immediately as you adjust parameters
- Mobile-Friendly - Responsive design that works across different devices and screen sizes
Experience the edge detection in action: Live Demo
-
Interactive Controls
- Adjust high and low thresholds
- Fine-tune Gaussian blur sigma
- Modify kernel size
- Real-time parameter updates
-
Multiple Input Options
- File upload support for custom images
- Pre-loaded demo images (car.jpg, nishida_2.jpeg, ukiyo-e.png)
- Drag and drop support
-
Progressive Web App Features
- Offline functionality via Service Worker
- Cached resources for faster loading
- Installable on supported devices
-
Web Worker Implementation
- Processes edge detection in a separate thread
- Prevents UI freezing during computation
- Maintains responsive user experience
-
Service Worker Caching
- Caches demo images for offline access
- Improves loading performance
- Reduces server requests
- Visual Feedback
- Loading indicators during processing
- Real-time parameter value display
- Side-by-side comparison view
- Clone the repository
- Open
index.htmlin a modern web browser - Upload an image or use one of the demo images
- Adjust parameters to see different edge detection results
Works in all modern browsers that support:
- ES6+ JavaScript
- Web Workers
- Service Workers
- Canvas API
This project is open source and available under the MIT License.
Contributions are welcome! Feel free to submit issues and pull requests.~~