opencv 尝试将图像转换为二进制时未定义cv

6l7fqoea 于 2022-11-15 发布在其他

关注(0)|答案(2)|浏览(144)

所以，我尝试将图像转换为二进制，我有2个画布，第一个是显示原始文件（图像），第二个是显示二进制图像。起初，当我只显示原始图像时，它工作得很好，但当我编写代码将其转换为二进制图像时，控制台显示错误：

script.js:26 Uncaught ReferenceError: cv is not defined
    at file:///***script.js:26:11

下面是HTML代码：

<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 class="inputoutput">
    <canvas id="canvasBinary"></canvas>
    <div class="caption">Binary</canvas>
  </div>
</div>
<script type="text/javascript" src="scriptOCV.js">
</script>
<script async src="opencv.js" type="text/javascript"></script>

这是我的剧本

let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (e) => {
  imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);

//read image
imgElement.onload = function () {
  let mat = cv.imread(imgElement);
  cv.imshow('canvasOutput', mat);
  mat.delete();
};


//check openCV
var Module = {
  // https://emscripten.org/docs/api_reference/module.html#Module.onRuntimeInitialized
  onRuntimeInitialized() {
    document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
  }
};

//convert img -> binary
let src = cv.imread('canvasOutput');
let dst = new cv.Mat();
cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0);
cv.adaptiveThreshold(src, dst, 200, cv.ADAPTIVE_THRESH_GAUSSIAN_C, cv.THRESH_BINARY, 3, 2);
cv.imshow('canvasBinary', dst);
src.delete();
dst.delete();

imgElement函数工作正常。但是在convert img-〉binary中它显示cv没有定义。我不知道我的代码有什么问题。

opencv

来源：https://stackoverflow.com/questions/73875166/cv-not-defined-when-trying-to-convert-image-to-binary

2条答案

按热度按时间

ulydmbyx1#

我不知道这是否是最好的解决方案，但是我们可以在“OpenCV.js is ready”之后执行“convert img”代码。

在document.getElementById('status').innerHTML = 'OpenCV.js is ready.';之后，添加对onOpenCvReady();的调用：
将“convert img”代码放在onOpenCvReady()函数中。

JavaScript程式码：

let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (e) => {
  imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);

//read image
imgElement.onload = function () {
  let mat = cv.imread(imgElement);
  cv.imshow('canvasOutput', mat);
  mat.delete();
};

//check openCV
var Module = {
  // https://emscripten.org/docs/api_reference/module.html#Module.onRuntimeInitialized
  onRuntimeInitialized() {
    document.getElementById('status').innerHTML = 'OpenCV.js is ready.';

    //Execute the function after OpenCV.js is ready.
    onOpenCvReady();
  }
};

function onOpenCvReady() {
  //convert img -> binary
  let src = cv.imread('canvasOutput');
  let dst = new cv.Mat();
  cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0);
  cv.adaptiveThreshold(src, dst, 200, cv.ADAPTIVE_THRESH_GAUSSIAN_C, cv.THRESH_BINARY, 3, 2);
  cv.imshow('canvasBinary', dst);
  src.delete();
  dst.delete();
};

赞(0）回复(0）举报 2022-11-15

k4emjkb12#

所以我已经想通了，现在，我不认为这是最好的解决方案，但它使代码的工作.：）.我只是要移动
将“convert img -〉binary”移到onload函数中，所以最终的script.js应该是这样的：

let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (e) => {
  imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);

//read image
imgElement.onload = function () {
  let mat = cv.imread(imgElement);
  cv.imshow('canvasOutput', mat);
  mat.delete();

  //convert img -> binary
  let src = cv.imread('canvasOutput');
  let dst = new cv.Mat();
  cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0);
  cv.adaptiveThreshold(src, dst, 200, cv.ADAPTIVE_THRESH_GAUSSIAN_C, cv.THRESH_BINARY, 3, 2);
  cv.imshow('canvasBinary', dst);
  src.delete();
  dst.delete();
};

//check openCV
var Module = {
  // https://emscripten.org/docs/api_reference/module.html#Module.onRuntimeInitialized
  onRuntimeInitialized() {
    document.getElementById('status').innerHTML = 'OpenCV.js is ready.';

    //Execute the function after OpenCV.js is ready.
  }
};

赞(0）回复(0）举报 2022-11-15

我来回答

opencv 尝试将图像转换为二进制时未定义cv

2条答案

相关问题

热门标签

最新问答