cv not defined, when trying to convert image to binary-CodePudding

So, I'm trying to convert image to binary, I have 2 canvas, first one is to display original file(image), second one is to display binary images. At first when I only show original image, it worked just fine, but when I wrote code to convert it to binary image, the console shows error :

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

Here is the HTML code:

<p id="status">OpenCV.js is loading...</p>
<div>
  <div >
    <img id="imageSrc" alt="No Image" />
    <div >imageSrc <input type="file" id="fileInput" name="file" /></div>
  </div>
  <div >
    <canvas id="canvasOutput" ></canvas>
    <div >canvasOutput</div>
  </div>
  
  <div >
    <canvas id="canvasBinary"></canvas>
    <div >Binary</canvas>
  </div>
</div>
<script type="text/javascript" src="scriptOCV.js">
</script>
<script async src="opencv.js" type="text/javascript"></script>

and here is my 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 function works just fine. But in convert img->binary it shows cv is not defined. I have no idea what's wrong with my code.

CodePudding user response：

I don't know if it's the best solution, but we may execute the "convert img" code after "OpenCV.js is ready".

After document.getElementById('status').innerHTML = 'OpenCV.js is ready.';, add a call to onOpenCvReady();:
Place the "convert img" code inside onOpenCvReady() function.

JavaScript code:

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();
};

CodePudding user response：

So i have figured it out now, I don't think this is the best solution but it makes the code work. :). I just have to move

move 'convert img -> binary' to onl oad function. so final script.js would be like this:

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.
  }
};