Javascript 教程-将OpenCV JS添加到ELECTRON项目_Javascript_Node.js_Opencv_Electron_Opencv4nodejs

Javascript 教程-将OpenCV JS添加到ELECTRON项目

javascript node.js opencv electron

Javascript 教程-将OpenCV JS添加到ELECTRON项目,javascript,node.js,opencv,electron,opencv4nodejs,Javascript,Node.js,Opencv,Electron,Opencv4nodejs,在过去的几个小时里，我一直在讨论这个问题，所以我将把我的问题的答案贴在这里，这样你就不必了。我正在运行Windows10，正在开发一个运行NodeV12.16.1和Electron v8.2.0的Electron应用程序我一直在学习各种教程，但没有一个能以其他复杂的方式工作或成功突破。我尝试了opencv4nodejs和其他各种解决方案，这是让opencvjs工作的最可靠的方法这是我设法让它工作的方法： <script async src="https://docs.opencv.o

在过去的几个小时里，我一直在讨论这个问题，所以我将把我的问题的答案贴在这里，这样你就不必了。

我正在运行Windows10，正在开发一个运行NodeV12.16.1和Electron v8.2.0的Electron应用程序

我一直在学习各种教程，但没有一个能以其他复杂的方式工作或成功突破。我尝试了opencv4nodejs和其他各种解决方案，这是让opencvjs工作的最可靠的方法

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

<script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady()" type="text/javascript"></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>


人机展
OpenCV.js正在加载
imageSrc
肠胃输出
让imgElement=document.getElementById（'imageSrc'）；
让inputElement=document.getElementById（'fileInput'）；
inputElement.addEventListener（'change'，（e）=>{
imgElement.src=URL.createObjectURL（e.target.files[0]）；
}，假）；
imgElement.onload=函数（）{
设mat=cv.imread（imgElement）；
cv.imshow（'canvasOutput'，mat）；
mat.delete（）；
};
函数onOpenScready（）{
document.getElementById（'status'）.innerHTML='OpenCV.js已准备就绪'；
}

请仅在问题框中张贴问题-答案应单独张贴在答案框中

<!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>