图片

2024年06月19日

柏拉文

越努力，越幸运

一、认识

---

二、实现

---

2.1 index.html

<div class="opencv-load-message">
        
</div>
<div class="input-container">
    <img id="input-img" />
    <input type="file" id="input-file" />
</div>

<div class="output-container">
    <canvas id="output-canvas"></canvas>
</div>

<script src="./index.js"></script>

<script
    async
    src="https://docs.opencv.org/4.5.0/opencv.js"
    onload="onOpenCvReady();"
    type="text/javascript"
></script>

2.2 index.js

const inputImgEl = document.getElementById('input-img');
const inputFileEl = document.getElementById('input-file');
const outputCanvasEl = document.getElementById('output-canvas');
const opencvLoadMessageEl = document.querySelector('.opencv-load-message');

inputFileEl.addEventListener('change', e => {
  const file = e.target.files[0];
  inputImgEl.src = URL.createObjectURL(file);
});

inputImgEl.addEventListener('load', () => {
  // 1. 获取输入矩阵
  const src = cv.imread(inputImgEl);
  // 2. 将输入矩阵显示到 outputCanvasEl 中
  cv.imshow(outputCanvasEl, src);
  // 3. 释放内存
  src.delete();
});

function onOpenCvReady() {
  cv['onRuntimeInitialized'] = () => {
    inputFileEl.disabled = false;
    opencvLoadMessageEl.innerHTML = 'OpenCV.js is ready!';
  };
}

inputFileEl.disabled = true;
opencvLoadMessageEl.innerHTML = 'OpenCV.js is loading……';