Member-only story
Image Processing — Making Custom Image Filters in React.js
Thanks for reading my first part. Now get ready to dive into another implementation.
Note: Part 1 talks about the fundamental of image processing and then create a small app using Cloudniary API’s for filters. Checkout the live app here — https://cryptic-sierra-27182.herokuapp.com/, Read the blog post here to know more.
One of the most fun things to do in programming is to solve the same problem in different ways. But everything comes with a cost. As we have used Cloudniary for image processing in the first part of the series, which is a paid solution although a great library to begin with.
Today we will implement some of some important concepts while playing with images:
- Smoothing Filters (Some filters and Algo’s for it)
- Thresholding Filters
- Finding contours in the image
Finally, we will use a live camera to capture some images from the webcam live stream.
Note: Here is the live app link of UI (may take time to load for first time ) — https://peaceful-reef-69295.herokuapp.com/ and Github code link — https://github.com/overflowjs-com/image_app_image_processing_opencvviawebcam_part_2, Please feel free to check it out.
Libraries
OpenCV: https://www.npmjs.com/package/opencv4nodejs
- This one is going to take time if you are a beginner. Setting up a third party system is something to learn.
Node js: https://www.npmjs.com/package/opencv4nodejs
WebCam Connector: https://www.npmjs.com/package/react-webcam
- Use this straight implementation of a webcam wrapper
API Calling Library
- We are using isomorphic-fetch from NPM to call API from React
Frontend: React and material UI. See the previous article for more help
API: Nodejs Express.js code written in ES6 for API and server-side processing.
