javascript - How to integrate OpenCV.js in a React WebApp? - Stack Overflow

I'm new to Javascript and React. I would like to embed OpenCV.js into a basic React.js web app to build an online client-side document scanner (I already have the image processing pipeline developped in Python).

I used yarn create react-app to get a basic working React sandbox containing : App.js which is the main React ponent and index.js which plugs it into the DOM. I added a custom imageProcessing.js file that will contain my image processing pipeline. A yarn start mand is available to pile everything and display the result in my browser.

In order to use OpenCV in this pipeline, I downloaded opencv.js from official page, put it next to imageProcessing.js and finally called it through const cv = require('../lib/opencv'). The problem is the yarn start mand piles sources for hours and it is clearly not possible to develop anything.

Now my question is : how to efficiently pile my web app with that heavy opencv.js (13MB) in my sources ? Is their a better way of integrating the lib ?

Thanks for your help !

I'm new to Javascript and React. I would like to embed OpenCV.js into a basic React.js web app to build an online client-side document scanner (I already have the image processing pipeline developped in Python).

I used yarn create react-app to get a basic working React sandbox containing : App.js which is the main React ponent and index.js which plugs it into the DOM. I added a custom imageProcessing.js file that will contain my image processing pipeline. A yarn start mand is available to pile everything and display the result in my browser.

In order to use OpenCV in this pipeline, I downloaded opencv.js from official page, put it next to imageProcessing.js and finally called it through const cv = require('../lib/opencv'). The problem is the yarn start mand piles sources for hours and it is clearly not possible to develop anything.

Now my question is : how to efficiently pile my web app with that heavy opencv.js (13MB) in my sources ? Is their a better way of integrating the lib ?

Thanks for your help !

• javascript
• reactjs
• opencv

Share Improve this question Follow asked Nov 28, 2018 at 10:20 fweberfweber 38511 gold badge22 silver badges1212 bronze badges 9

• Include opencv.js as <script> in your index.html instead. – user5734311 Commented Nov 28, 2018 at 10:22
• you can check also brainhub.eu/blog/opencv-react-native-image-processing – Amir-Mousavi Commented Nov 28, 2018 at 10:25
• 1 Thanks, Chris G. I'm really sorry for my huge misunderstanding of these language but now i have a ` <script async src="../src/lib/opencv.js" type="text/javascript"></script>` in my HTML file, how should i import it in my imageProcessing.js in order to use for instance cv.imread() in it ? – fweber Commented Nov 28, 2018 at 10:53
• 1 If imageProcessing.js gets bundled by webpack, you need to put /* global cv */ at the top. This should allow you to use cv in your scripts without lint plaining about cv being undefined. – user5734311 Commented Nov 28, 2018 at 11:10
• 1 Hi I'm facing the same issue. OpenCV.JS is doable or not, or we should use iOS, Android native module for openCV C/Java? Hope the discussion continue although the poster decided to go another way. Thanks! – Denly Commented Sep 3, 2019 at 15:39

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 0

You could use a cdn instead of using locally this way react won't bother you. (but make sure that you don't have/have sufficient data limit because opencv.js is a heavy library & it'll request everytime when you reload page...) but you can store that library in catch with PWA so that it'll store opencv.js in browser's cache & whenever you reload page it'll send cached file instead of request 1000s of times... & obviously it'll reduce bandwidth usage & other point is you can use their functions methods in useEffect or outside ponent function

// opencv.js code here

function App(props){...}

OR

function App(props){
    useEffect(() => {

    // opencv.js code here

    }, [])
}

make sure to let the user know that some heavy loading in background running while loading the opencv.js file...