OpenCV 자바스크립트 소개
이 튜토리얼에서는 OpenCV의 opencv.js 바인딩을 사용하여 JavaScript에서 OpenCV에 대해 설명합니다.
OpenCV 자바스크립트 소개
OpenCV는 이미지 처리 및 컴퓨터 비전 애플리케이션에 사용되고 있습니다. OpenCV는 컴퓨터 비전 애플리케이션을 구축하는 데 사용할 수 있는 Python, Java 및 C++와 같은 많은 프로그래밍 언어를 지원합니다.
웹 개발에서 OpenCV의 opencv.js 바인딩을 사용하여 컴퓨터 비전 및 이미지 처리 애플리케이션으로 웹사이트를 구축할 수 있습니다. 또한 JavaScript와 함께 OpenCV를 사용하여 멀티미디어 처리 응용 프로그램용 웹 사이트를 구축할 수 있습니다.
OpenCV의 비전 기능과 같은 웹 개발용 OpenCV 기능의 하위 집합을 사용할 수 있습니다. 그러나 웹 페이지에서 OpenCV 기능을 사용하려면 HTML의 <script> 태그를 사용하여 opencv.js 바인딩을 웹 페이지와 연결해야 합니다.
파일 주소를 링크하거나 다운로드한 다음 .html 파일과 링크할 수 있습니다.
.html 파일에 파일 주소를 연결하면 .html 파일을 실행할 때마다 파일을 로드하기 위해 인터넷이 필요합니다. 그러나 opencv.js 파일을 .html 파일과 함께 다운로드하여 연결하면 파일을 이끌기 위해 인터넷이 필요하지 않습니다.
예를 들어 아래 코드 줄을 사용하여 .html 파일의 <script> 태그를 사용하여 파일 주소를 사용하여 opencv.js 파일을 연결할 수 있습니다. 아래 코드를 참조하십시오.
<script async src="https://docs.opencv.org/4.5.0/opencv.js" type="text/javascript"></script>
위의 코드에서 링크 주소에서 OpenCV의 버전 번호도 볼 수 있으며, 사용하려는 버전에 따라 변경할 수 있습니다. 마지막으로 그래픽 컨테이너를 사용하여 웹 페이지에 이미지를 표시해야 합니다.
OpenCV의 imshow() 기능을 사용하여 이미지를 표시하는 그래픽 컨테이너인 HTML의 <canvas> 태그를 사용할 수 있습니다. canvas 컨테이너의 id와 imshow() 함수 내에서 imread() 함수로 읽은 이미지를 전달하여 이를 표시해야 합니다.
예를 들어 HTML을 사용하여 간단한 웹 페이지를 만들고 OpenCV의 imread() 및 imshow() 기능을 사용하여 웹 페이지의 이미지를 읽고 표시해 보겠습니다. 아래 코드를 참조하십시오.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Introduction to OpenCV JavaScript</title>
</head>
<body>
<h2>Introduction to OpenCV JavaScript</h2>
<div>
<div class="inputoutputDiv">
<img id="SourceImage" alt="" />
<div class="caption">imagesrc <input type="file" id="InputfileName" name="file" /></div>
</div>
<div class="inputoutputDiv">
<canvas id="canvasOutputContainer"></canvas>
<div class="caption">canvasOutputContainer</div>
</div>
</div>
<script type="text/javascript">
let imgElement = document.getElementById('SourceImage');
let inputElement = document.getElementById('InputfileName');
inputElement.addEventListener('change', (e) => {
imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
imgElement.onload = function () {
let mat = cv.imread(imgElement);
cv.imshow('canvasOutputContainer', mat);
mat.delete();
};
</script>
<script async src="https://docs.opencv.org/4.5.0/opencv.js" type="text/javascript"></script>
</body>
</html>
출력:
위의 코드를 실행하려면 .html 파일에 저장하고 웹 브라우저에서 열어야 합니다.
위의 코드에서는 입력 이미지를 로드할 때 실행되는 onload() 함수를 사용했고, 이 함수 내에서 OpenCV를 사용하여 이미지를 읽고 표시했습니다.
