Member-only story

Image Processing — Making Custom Image Filters in React.js

Deepak Gupta
Level Up Coding
Published in
9 min readAug 6, 2019

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:

  1. Smoothing Filters (Some filters and Algo’s for it)
  2. Thresholding Filters
  3. 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

--

--

Written by Deepak Gupta

COO @Steer Protocol| Write about Blockchain & Javascript | Take it easy

No responses yet

What are your thoughts?