How to use OpenCV with Javascript (Opencv.js)

Process images with OpenCV directly inside a web page!

As a multi-platform library, OpenCV can be used with an extensive number of languages including, of course, Javascript.

Doing image processing tasks directly in the browser can be very useful, after all… a big part of the internet is based on multimedia content (hence, video and images). There’s also HTML 5 which allowed us to access each pixel image via canvas API, making everything even easier.

OpenCV.js

OpenCV.js is a JavaScript binding for a large subset of OpenCV functions. It could be loaded in a webpage by the <script> tag. It could take a bit to load ( the file has around 8 Mb) So be advised that it may not be ready immediately. We always can load it asynchronously by adding async to the tag. The resulting call is as follows:

Note that the script link is from the official OpenCV website. You can always download it and make it available from your server.

The code

Everything will be done using usual tags, such as divs , img and canvas . So, to show the image:

<div>
    <img id="imageSrc" style="border: none;"/>
    <canvas id="canvasOutput" width="300"></canvas>
</div>

<div>

</div>

As mentioned, it is important to load the script asynchronously. Then, it’s necessary to warn the user of the current script state (loading/loaded)

[...]
<p id="status">OpenCV.js status: Loading...</p>
[...]

function onOpenCvReady() {
       document.getElementById('status').innerHTML = 'OpenCV.js status: Ready.';
}

[...]

<p id="status">OpenCV.js status: Loading...</p>

[...]

function onOpenCvReady() {

document.getElementById('status').innerHTML = 'OpenCV.js status: Ready.';

}

The script that does the heavy lifting:

<script type="text/javascript">
    let imgElement = document.getElementById('imageSrc');
    let inputElement = document.getElementById('fileInput');
    inputElement.addEventListener('change', (e) => {
        imgElement.src = URL.createObjectURL(e.target.files[0]);
    }, false);
    imgElement.onload = function () {
        let mat = cv.imread(imgElement);
        cv.cvtColor(mat, mat, cv.COLOR_RGB2GRAY, 0);
        cv.Canny(mat, mat, 50, 100, 3, false);
        cv.imshow('canvasOutput', mat);
        mat.delete();
    };
</script>

let imgElement = document.getElementById('imageSrc');

let inputElement = document.getElementById('fileInput');

inputElement.addEventListener('change', (e) => {

imgElement.src = URL.createObjectURL(e.target.files[0]);

}, false);

imgElement.onload = function () {

let mat = cv.imread(imgElement);

cv.cvtColor(mat, mat, cv.COLOR_RGB2GRAY, 0);

cv.Canny(mat, mat, 50, 100, 3, false);

cv.imshow('canvasOutput', mat);

mat.delete();

};

</script>

Noticed something? The image processing code we used is the same as we use in other languages. This code simply runs a Canny edge detector on an image:

let mat = cv.imread(imgElement);
cv.cvtColor(mat, mat, cv.COLOR_RGB2GRAY, 0);
cv.Canny(mat, mat, 50, 100, 3, false);
cv.imshow('canvasOutput', mat);
mat.delete();

let mat = cv.imread(imgElement);

cv.cvtColor(mat, mat, cv.COLOR_RGB2GRAY, 0);

cv.Canny(mat, mat, 50, 100, 3, false);

cv.imshow('canvasOutput', mat);

mat.delete();

The full code is as follows:

<div style="border: thin solid black;">

    <center>
        <h2>OpenCV.js Magic box :)</h2>
        <p id="status">OpenCV.js status: Loading...</p>
        <div>
            <div class="row-align">
                <img id="imageSrc" style="border: none;" />
                <canvas id="canvasOutput" width="300"></canvas>
            </div>

            <input type="file" id="fileInput" name="file" />
        </div>
    </center>

    <script type="text/javascript">
        let imgElement = document.getElementById('imageSrc');
        let inputElement = document.getElementById('fileInput');
        inputElement.addEventListener('change', (e) => {
            imgElement.src = URL.createObjectURL(e.target.files[0]);
        }, false);
        imgElement.onload = function () {
            let mat = cv.imread(imgElement);
            cv.cvtColor(mat, mat, cv.COLOR_RGB2GRAY, 0);
            cv.Canny(mat, mat, 50, 100, 3, false);
            cv.imshow('canvasOutput', mat);
            mat.delete();
        };
        function onOpenCvReady() {
            document.getElementById('status').innerHTML = 'OpenCV.js status: Ready.';
        }
    </script>

    <script async src="https://docs.opencv.org/4.5.4/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
</div>

<h2>OpenCV.js Magic box :)</h2>

<p id="status">OpenCV.js status: Loading...</p>

<div>

</div>

</div>

</center>

let imgElement = document.getElementById('imageSrc');

let inputElement = document.getElementById('fileInput');

inputElement.addEventListener('change', (e) => {

imgElement.src = URL.createObjectURL(e.target.files[0]);

}, false);

imgElement.onload = function () {

let mat = cv.imread(imgElement);

cv.cvtColor(mat, mat, cv.COLOR_RGB2GRAY, 0);

cv.Canny(mat, mat, 50, 100, 3, false);

cv.imshow('canvasOutput', mat);

mat.delete();

};

function onOpenCvReady() {

document.getElementById('status').innerHTML = 'OpenCV.js status: Ready.';

}

</script>

</div>

This code as rendered by your page generates output as shown below, fully interactive and ready to use, have fun!

OpenCV.js Magic box 🙂

OpenCV.js status: Loading…

Jean Vitor

Recent Posts

Tag Cloud

Recent Comments

Archives

Categories

OpenCV.js

The code

OpenCV.js Magic box 🙂

One thought on “How to use OpenCV with Javascript (Opencv.js)”

Leave a ReplyCancel reply