OpenCV JavaScript를 사용하여 이미지 표시
이 튜토리얼에서는 JavaScript에서 OpenCV를 사용하여 웹 페이지에 이미지를 표시하는 방법에 대해 설명합니다.
OpenCV JavaScript를 사용하여 이미지 표시
JavaScript에서 OpenCV의 imread() 기능을 사용하여 이미지를 읽을 수 있습니다. 이미지를 읽으려면 canvas 요소의 name, id 또는 image 요소의 name 또는 id를 imread() 함수에 전달하여 이미지를 읽어야 합니다.
OpenCV JavaScript는 이미지를 n차원 배열 클래스에 속하는 cv.Mat 유형으로 저장하며 double, float 등과 같은 다양한 데이터 유형에 데이터를 저장할 수 있습니다. imread() 함수는 RGBA 채널이 있는 이미지를 포함하는 cv.Mat 유형을 반환합니다.
이미지를 읽은 후 이미지의 색 공간을 변경하는 것과 같은 이미지 처리 작업을 수행할 수 있으며 OpenCV의 imshow() 기능을 사용하여 웹 페이지에 표시할 수 있습니다.
이미지를 표시하려면 그래픽 컨테이너가 필요합니다. HTML의 <canvas> 태그를 사용하여 이미지를 표시할 그래픽 컨테이너를 만들 수 있습니다.
imshow() 함수에는 두 개의 입력 인수가 있습니다. 첫 번째는 canvas 요소의 name 또는 id이고 두 번째는 웹 페이지에 표시하려는 이미지를 포함하는 변수입니다.
imshow() 내부에 전달된 이미지가 8비트 무부호인 경우 그대로 표시됩니다.
이미지가 16비트 무부호 또는 32비트 정수인 경우 이미지의 픽셀을 256으로 나눈 다음 픽셀 값이 허용 범위에 들어가도록 표시합니다.
이미지가 32비트 부동 소수점인 경우 픽셀에 255를 곱하고 0 - 255 범위에서 매핑한 다음 이미지를 표시합니다.
이미지를 표시한 후 delete() 함수를 사용하여 이미지 변수를 삭제할 수 있습니다. 예를 들어 컬러 이미지를 읽어 회색으로 변환한 다음 원본 이미지와 함께 웹 페이지에 표시해 봅시다.
아래 예제 코드를 참조하십시오.
<!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 srcImage = cv.imread(imgElement);
let dstImage = new cv.Mat();
cv.cvtColor(srcImage, dstImage, cv.COLOR_RGBA2GRAY);
cv.imshow('canvasOutputContainer', dstImage);
srcImage.delete();
dstImage.delete();
};
</script>
<script async src="https://docs.opencv.org/4.5.0/opencv.js" type="text/javascript"></script>
</body>
</html>
출력:
위의 코드에서는 OpenCV의 cvtColor() 함수를 사용하여 컬러 이미지를 회색으로 변환했습니다.
cvtColor() 함수의 첫 번째 인수는 컬러 이미지를 포함하는 변수이고 두 번째 인수는 출력 이미지를 저장하려는 변수입니다.
세 번째 인수는 cv.COLOR_RGBA2GRAY와 같이 색상 공간의 변환을 지정하는 데 사용되며 입력 이미지의 RGBA 색상 공간을 회색으로 변환합니다.
위의 코드에서는 HTML의 onload() 함수를 사용했는데, 입력 이미지를 로드하면 실행되고 그 안에 있는 코드가 실행되어 이미지가 표시됩니다.
또한 파일 링크를 사용하여 opencv.js 파일을 .html 파일에 연결했습니다. 파일을 연결하려면 인터넷이 필요하지만 파일을 다운로드한 다음 .html로 연결할 수도 있습니다. 파일.
위의 코드를 실행하려면 .html 파일에 저장한 다음 웹 브라우저에서 파일을 열어야 합니다.
