SOURCE

let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (e) => {
    imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
function cvtColor(img_origin) {
    let img_gray = new cv.Mat();
    cv.cvtColor(img_origin, img_gray, cv.COLOR_RGBA2GRAY, 0);
    return img_gray;
}
function gaussianBlur(img_origin) {
    let img_blurred = new cv.Mat();
    let ksize = new cv.Size(99, 99);
    cv.GaussianBlur(img_origin, img_blurred, ksize, 0);
    return img_blurred;
}
function adaptiveThreshold(img_origin) {
    let img_threshold = new cv.Mat();
    cv.adaptiveThreshold(img_origin, img_threshold, 255, cv.ADAPTIVE_THRESH_GAUSSIAN_C, cv.THRESH_BINARY, 5, 2);
    return img_threshold;
}
imgElement.onload = function () {
    setTimeout(() => {
        console.log(cv)
        let img_origin = cv.imread(imgElement);
        cv.imshow('canvasOutput', gaussianBlur(img_origin));
        img_origin.delete();
    }, 500)

};

<div>
  <div class="inputoutput">
    <img id="imageSrc" crossorigin="" alt="No Image" width="100%" src='https://img.jbzj.com/file_images/article/202208/2022080409070709.jpg' />
    <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>