threshold()请输入有效的canvas或img id错误

问题描述 投票:0回答:1

我在opencv.js库中遇到cv.threshold()函数的问题。

我的代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="opencv.js" type="text/javascript"></script>
</head>
<body>
<h2>Hello OpenCV.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
  <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="canvasInput" ></canvas>    
  </div>
    <div class="inputoutput2">
    <canvas id="canvasOutput" ></canvas>
   </div>
  </div>
<script type="text/javascript">
let image1=cv.imread('bookpage.jpg');
let threshold;
cv.threshold(image1,threshold,12,250,THRESH_BINARY);
cv.imshow('canvasInput',image);
cv.imshow('canvasOutput',threshold);
</script>

</body>
</html>

错误:

未捕获错误:请输入有效的画布或img id。 at Object.Module.imread(/C:/Users/q/Desktop/web/opencv.js/4-)Thresholding/opencv.js:56:20361)

我该如何解决这个错误?

javascript opencv
1个回答
0
投票

您需要传递错误消息中所述的画布或图像ID。你传给它一个文件名。来自文档的示例代码

OpenCV docs

<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.imshow('canvasOutput', mat);
  mat.delete();
};
function onOpenCvReady() {
   document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>
© www.soinside.com 2019 - 2024. All rights reserved.