Revision history [back]

opencv.js doesn't loaded even after 'onload event' occurs

I get error like "cv.Mat is not a constructor" or "cv is not defined". My code is:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script async src="js/opencv.js"  onload="onOpenCvReady()" type="text/javascript"></script>
</head>
<body>
    <canvas id="canvasOutput" width="300" height="300"></canvas>  
    <script type="text/javascript">
        var scene = new Image();
        scene.src = 'templates/Scene_7.png';

        window.addEventListener("load", function () {
            try {
                let scene1 = cv.imread(scene);
                cv.imshow('canvasOutput', scene1);
            }
            catch (e) {
            }
        }, false);

        function onOpenCvReady() {
            try {
                let scene1 = cv.imread(scene);
                cv.imshow('canvasOutput', scene1);
            }
            catch (e) {
            }
        }
    </script>
</body>
</html>

But, if I change code to

<input id="Button" onclick="start();" type="button" value="Start" />
 function start() {
            try {
                let scene1 = cv.imread(scene);
                cv.imshow('canvasOutput', scene1);
            }
            catch (e) {
                utils.printError(e);
                var x = e;
            }
        }

then everything is OK. So, I think opencv.js doesn't load even after onOpenCvReady() and window "load" events occur. WHY?

opencv.js doesn't loaded even after 'onload event' occurs

I get error like "cv.Mat is not a constructor" or "cv is not defined". My code is:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script async src="js/opencv.js"  onload="onOpenCvReady()" type="text/javascript"></script>
</head>
<body>
    <canvas id="canvasOutput" width="300" height="300"></canvas>  
    <script type="text/javascript">
        var scene = new Image();
        scene.src = 'templates/Scene_7.png';

        window.addEventListener("load", function () {
            try {
                let scene1 = cv.imread(scene);
                cv.imshow('canvasOutput', scene1);
            }
            catch (e) {
            }
        }, false);

        function onOpenCvReady() {
            try {
                let scene1 = cv.imread(scene);
                cv.imshow('canvasOutput', scene1);
            }
            catch (e) {
            }
        }
    </script>
</body>
</html>

But, if I change code to

<input id="Button" onclick="start();" type="button" value="Start" />
 function start() {
            try {
                let scene1 = cv.imread(scene);
                cv.imshow('canvasOutput', scene1);
            }
            catch (e) {
                utils.printError(e);
                var x = e;
            }
        }

then everything is OK. So, I think opencv.js doesn't load even after onOpenCvReady() and window "load" events occur. WHY?

opencv.js doesn't loaded even after 'onload event' 'onload' event occurs

I get error like "cv.Mat is not a constructor" or "cv is not defined". My code is:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script async src="js/opencv.js"  onload="onOpenCvReady()" type="text/javascript"></script>
</head>
<body>
    <canvas id="canvasOutput" width="300" height="300"></canvas>  
    <script type="text/javascript">
        var scene = new Image();
        scene.src = 'templates/Scene_7.png';

        window.addEventListener("load", function () {
            try {
                let scene1 = cv.imread(scene);
                cv.imshow('canvasOutput', scene1);
            }
            catch (e) {
            }
        }, false);

        function onOpenCvReady() {
            try {
                let scene1 = cv.imread(scene);
                cv.imshow('canvasOutput', scene1);
            }
            catch (e) {
            }
        }
    </script>
</body>
</html>

But, if I change code to

<input id="Button" onclick="start();" type="button" value="Start" />
 function start() {
            try {
                let scene1 = cv.imread(scene);
                cv.imshow('canvasOutput', scene1);
            }
            catch (e) {
                utils.printError(e);
                var x = e;
            }
        }

then everything is OK. So, I think opencv.js doesn't load even after onOpenCvReady() and window "load" events occur. ~~WHY?~~But why?

opencv.js doesn't loaded even after 'onload' event occurs

I get error like "cv.Mat is not a constructor" or "cv is not defined". My code is:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script async src="js/opencv.js"  onload="onOpenCvReady()" type="text/javascript"></script>
</head>
<body>
    <canvas id="canvasOutput" width="300" height="300"></canvas>  
    <script type="text/javascript">
        var scene = new Image();
        scene.src = 'templates/Scene_7.png';

        window.addEventListener("load", function () {
            try {
                let scene1 = cv.imread(scene);
                cv.imshow('canvasOutput', scene1);
            }
            catch (e) {
            }
        }, false);

        function onOpenCvReady() {
            try {
                let scene1 = cv.imread(scene);
                cv.imshow('canvasOutput', scene1);
            }
            catch (e) {
            }
        }
    </script>
</body>
</html>

But, if I change code to

<input id="Button" onclick="start();" type="button" value="Start" />
 function start() {
            try {
                let scene1 = cv.imread(scene);
                cv.imshow('canvasOutput', scene1);
            }
            catch (e) {
            }
        }

and press the button "Start", then everything is OK. So, I think opencv.js doesn't load even after onOpenCvReady() and window "load" events occur. But why?