JS OpenCV 入门教程

这几天在研究 OpenCV

下载文档及 opencv.js

进入 https://docs.opencv.org/ 页面，点击下载文档，下载完成后，将文档中的 opencv.js 文件复制到本地，并且改名为 opencv.js

使用

文档文件夹中还有个 utils.js 文件，里面有不少方法可以方便使用，稍微改进一下

export function Utils(errorOutputId) {
  // ... 代码
}

在你的文件中引入 utils.js 文件，用这个文件去加载 opencv.js 文件

import { Utils } from './utils';
let utils = new Utils('errorMessage');

// 将图片加载到 canvas 中
utils.loadImageToCanvas('shape.jpg', 'canvasInput');
// 添加上传按钮，可以上传图片到 canvas 中
utils.addFileInputHandler('fileInput', 'canvasInput');

let tryIt = document.getElementById('tryIt');
tryIt.addEventListener('click', () => {
  utils.executeCode('codeEditor');
});

// 加载 opencvjs 文件后执行代码
utils.loadOpenCv(() => {
  // ... 代码
  tryIt.removeAttribute('disabled');
});

html 代码如下，当然你也可以动态创建一个 canvas 元素，然后把它放到你的页面中，研究了一下这个 js 只适合传一个 canvas 元素的 id

<div class="control"><button id="tryIt" disabled>Try it</button></div>
<textarea class="code" rows="9" cols="100" id="codeEditor" spellcheck="false">
</textarea>
<p class="err" id="errorMessage"></p>
</div>
<div>
    <table cellpadding="0" cellspacing="0" width="0" border="0">
    <tr>
        <td>
            <canvas id="canvasInput"></canvas>
        </td>
        <td>
            <canvas id="canvasOutput"></canvas>
        </td>
    </tr>
    <tr>
        <td>
            <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
        </td>
        <td>
            <div class="caption">canvasOutput</div>
        </td>
    </tr>
    </table>
</div>

下载文档及 opencv.js

使用

后记