A web-based tool that uses OpenCV.js to find a template image within a larger source image. Perfect for visual testing, image analysis, and pattern matching tasks.
- Real-time Image Processing: Instantly find matches using OpenCV.js template matching
- Image from clipboard to Base64 String Conversion: Get the converted string from existing image or an image from your clipboard
- Multiple Input Methods:
- Clipboard paste (Ctrl+V/⌘+V)
- Drag and drop
- Dedicated paste buttons
- User-Friendly Interface:
- Clear visual feedback
- Status updates
- Match confidence scoring
- Keyboard Shortcuts:
Ctrl/⌘ + Enter: Find matchEsc: Clear results
- Responsive Design: Works on desktop and mobile devices
- No Server Required: Runs entirely in the browser
Access the live demo: https://AutomateThePlanet.github.io/OpenCV-Image-Match-Finder/
- Template Image: Upload or paste a small image you want to find
- Source Image: Upload or paste the larger image to search within
- Find Match: Click the "Find Match" button or use
Ctrl/⌘ + Enter - Results: The tool highlights matches and shows the confidence score
The application uses OpenCV.js's template matching algorithm with the TM_CCOEFF_NORMED method, which provides robust matching even with slight variations in lighting or color.
- Clone the repository:
git clone https://github.com/AutomateThePlanet/OpenCV-Image-Match-Finder.git
cd OpenCV-Image-Match-Finder- Serve the files using any HTTP server. For example, using Python:
# Python 3
python -m http.server 8000
# Python 2
python -m SimpleHTTPServer 8000- Open
http://localhost:8000in your browser
image-match-finder/
├── index.html # Main HTML file
├── css/
│ └── styles.css # Styles and layout
├── js/
│ ├── main.js # Main application logic
│ ├── utils.js # Utility functions
│ └── imageHandling.js # Image processing functions
└── README.md
- OpenCV.js 4.8.0
- Modern browser with JavaScript enabled
- Support for the Clipboard API
- Support for the File API
- Support for Canvas API
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Template matching performance depends on:
- Image sizes
- Browser capabilities
- Device processing power
- Large images may take longer to process
- Recommended maximum image sizes:
- Template: 500x500 pixels
- Source: 2000x2000 pixels
- Clone the repository
- Make your changes
- Test using a local HTTP server
- Submit a pull request
No build process required! The application runs directly in the browser.
- Fork the repository
- Create a feature branch:
git checkout -b feature/my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin feature/my-new-feature - Submit a pull request
-
Images Not Pasting
- Ensure you're copying an image, not a file
- Try using the drag and drop feature instead
-
"OpenCV is not loaded" Error
- Check your internet connection
- Refresh the page
- Clear browser cache
-
Poor Match Results
- Ensure template image is smaller than source image
- Check for significant size/rotation differences
- Verify image quality and clarity
"OpenCV.js is loading...": Wait for library to load"Failed to read clipboard": Use Ctrl+V/⌘+V instead"Error processing images": Check image sizes and format
MIT License - see LICENSE file for details
- OpenCV.js - https://docs.opencv.org/
- Icons - Emoji graphics
- Original concept inspired by visual testing tools
- Create an issue for bugs or feature requests
- Submit pull requests for improvements
- Star the repository if you find it useful!
- Add support for multiple match detection
- Implement match threshold configuration
- Add rotation-invariant matching
- Include batch processing capabilities
- Add image preprocessing options
- Implement result save/export functionality
Nikolay Avramov (@n1xan)
Made with ❤️ using OpenCV.js