2

在过去的几个小时里，我一直坚持这一点，所以我将在这里发布我的问题的答案，这样你就不必这样做了。

我正在运行 Windows 10，并且正在开发一个运行 Node v12.16.1 和 electron v8.2.0 的 Electron 应用程序。

我一直在关注各种教程，但它们都没有工作或设法以其他一些复杂的方式打破。我尝试了 opencv4nodejs 和其他各种解决方案，这最终成为让 OpenCV js 工作的最可靠方法。

这是我设法让它工作的方式：

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

只需在 HTML 文件的末尾添加这一行。这个脚本会自动从 OpenCV 站点加载一个预编译的 js 文件，我敢肯定他们从来没有提到过。这个脚本几乎等同于let cv = require('cv')我见过的类似的东西。加载此文件后，它将调用onOpenCvReady().

在您的 HTML 文件中，您现在可以从 OpenCV 网站运行示例。

<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.imshow('canvasOutput', mat);
  mat.delete();
};

// Entry Point: 
function onOpenCvReady() {
  document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>

我希望这对你有用！

我的整个示例大致如下所示：

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="mainWindow.css">
<head>
    <title>Man Machine Exhibition</title>
</head>
<body>    
    <div class='container'>
    <p id="status">OpenCV.js is loading...</p>
    </div>
    <div class="container">
        <div class="inputoutput">
            <img id="imageSrc" alt="No Image" />
            <div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
          </div>
          <div class="inputoutput">
            <canvas id="canvasOutput" ></canvas>
            <div class="caption">canvasOutput</div>
          </div>
    </div>
</body>
<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.imshow('canvasOutput', mat);
  mat.delete();
};
function onOpenCvReady() {
  document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>
<script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady()" type="text/javascript"></script>
</html>
4

0 回答 0