How do I integrate openCV in reactjs project?

Question

I'm working on a reactjs project for a few months now one module requires some image processing. So, I would like to know how can I integrate openCV with reactjs. I can't find any articles, documentations for the same.

Answer 1

Have you tried to implement TensorFlow models instead of openCV to your ReactJS project?

Try checking out TensorFlow.js(website: https://www.tensorflow.org/js ) They have JavaScript compatible CV models. Maybe that's easier to implement than openCV.

I have completed several projects with TensorFlow.js and ReactJS. They work fine together.

Answer 2

You can use opencv.js for this. Unfortunately there isn't any NPM packages. However you can import it the same way as you would with an NPM package. Just in this case you need to manually download and add opencv.js to your project.

However, opencv.js is huge so I would recommend using a CDN for it.

Here is a link for the NodeJS tutorials of the documentation: https://docs.opencv.org/3.4/dc/de6/tutorial_js_nodejs.html

Further more I would not recommend it on a frontend application. Because of the size and computational power it needs. You could set up a backend API for it with NodeJS