OpenCV.js GaussianBlur函数无法正常工作吗?

时间:2019-12-10 16:34:14

标签: javascript opencv gaussianblur

我正在尝试使用GaussianBlur处理图像。

但是我无法使其工作。它说:

Uncaught TypeError: fields[fieldName].write is not a function
    at Object.toWireType (opencv.js:30)
    at Object.GaussianBlur (eval at new_ (opencv.js:30), <anonymous>:9:26)
    at Object.proto.<computed> [as GaussianBlur] (opencv.js:30)
    at HTMLImageElement.img.onload (pen.js:110)

这是codepen:https://codepen.io/sundowatch/pen/jOEqrqY?editors=1010

我找不到问题所在。

1 个答案:

答案 0 :(得分:1)

它对我有用,这是一个有效的示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</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="canvasOutput" ></canvas>
    <div class="caption">canvasOutput</div>
  </div>
</div>
<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 src = cv.imread(imgElement);
  let dst = new cv.Mat();
  let ksize = new cv.Size(5, 5);
  cv.GaussianBlur(src, dst, ksize, 0, 0, cv.BORDER_DEFAULT);
  cv.imshow('canvasOutput', dst);
  src.delete(); dst.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>
</body>
</html>

您的问题在其他地方。在您的代码段中的开发人员工具中,如果我尝试获取cv元素,则会收到错误消息。您能否再次检查您是否正在加载opencv.js <script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>