티스토리 뷰
opencv.js에서 어떻게 이미지를 읽고 웹에 표시하는지에 대해 공부해보았다.
HTML
HTML 요소는 다음과 같이 설정했다.
<body>
<input type="file" id="addFile"/>
<img id="inputImg" alt="이미지를 추가하세요.">
<canvas id="canvas" width="300" height="300"></canvas>
<canvas id="canvasOutput"></canvas>
<canvas id="canvasOutputGray"></canvas>
<canvas id="canvasOutputLuv"></canvas>
<button id="btn">click button</button>
</body>READ an image
opencv.js 는 이미지를 cv.Mat 타입으로 저장한다. HTML의 canvas 요소를 cv.Mat로 받을 수 있고 역도 성립한다.
ImageData 인터페이스는 canvas 요소 영역의 기본 픽셀 데이터를 표현, 설정할 수 있다.
1. 이미지 데이터 객체를 캔버스로 부터 생성하기
- html 요소가 canvas가 아닌 경우
file이 업로드 되었을 때 img의 src를 file의 src로 넣어준다.
e.target.files = FileList {0: File, length: 1}
File: {name: 'dog.jpg', lastModified: --, lastModifiedDate: -- GMT+0900 (한국 표준시), webkitRelativePath: '', size: 5765, …} 으로 구성되있다.
file이 업로드 되었을 때 라고 생각해서 load 이벤트가 들어가야 된다고 생각했는데 실행되지 않았다.
load: 페이지의 로딩이 완료되었을 때 이벤트 발생
change: 요소에 값이 변경 되었을 때 이벤트 발생
input type의 파일은 처음에 선택된 파일 없음이라는 글에서 요소가 변경되기에 change 이벤트를 사용하고 이미지의 경우 아무것도 load 되있지 않은 상태이기에 img에 src를 추가해준 순간 페이지에 로드 되기에 load 이벤트를 사용하는 것 같다.
var img = document.getElementById('inputImg');
var file = document.getElementById('addFile');
file.addEventListener("change", (e) => {
console.log(e.target.files);
img.src = URL.createObjectURL(e.target.files[0]);
});
// Read image
img.addEventListener("load", (e)=> {
let mat = cv.imread(img);
cv.imshow('canvas', mat);
mat.delete();
});- html 요소가 canvas인 경우
image 태그의 경우 getContext가 지원되지 않았다.getImageData(시작x, 시작y, 캔버스너비, 캔버스 높이)
var canvasInput = document.getElementById('canvas');
let ctx = canvasInput.getContext('2d');
let imgData = ctx.getImageData(0, 0, canvasInput.width, canvasInput.height);
let src = cv.matFromImageData(imgData);
cv.imshow('canvasOutput',src);
src.delete();ex1. getImageData(0,0,canvas.width, canvas.height
ex2.getImageData(100,100,canvas.width, canvas.height)
2. 이미지 출력
canvas는 연속 저장 기능이 있는 8bit RGBA 이미지를 지원하기에 cv.Mat의 타입은 cv.CV_8UC4이다.
기존의 opencv는 RGB 순서로 이미지를 표시하는 반면 CV_8UC4는 BGR 순서로 저장되기에 기본 opencv와 다르다고 한다.
cv.imread(imgSource)를 통해 image를 html에서 받아 사용할 수 있다.
imgSource는 canvas element or id, or image element or id가 가능하다.
cv.imread(imgSource)의 리턴값은 RGBA 순서로 담겨있는 mat이다.
cv.imshow(canvasSource, mat)을 통해 웹에 띄울 수 있다.
canvasSource는 canvas element or id 만 가능하며 mat 는 보여줄 mat 타입을 넣어주면 된다.
let canvas = cv.imread('canvasOutput');
let dst_gray = new cv.Mat();
let dst_luv = new cv.Mat();
cv.cvtColor(canvas, dst_gray, cv.COLOR_RGBA2GRAY);
cv.cvtColor(canvas, dst_luv, cv.COLOR_RGB2Luv);
cv.imshow('canvasOutputGray', dst_gray);
cv.imshow('canvasOutputLuv', dst_luv);
canvas.delete();
dst.delete();cvtColor(바꿀 이미지, 목적지 Mat 타입, 어떤 컬러로 변경시킬 것인지) 를 통해서 RGB를 바꿔줄 수 있다.
ex1. cv.cvtColor(canvas, dst_gray, cv.COLOR_RGBA2GRAY)
ex2. cv.cvtColor(canvas, dst_luv, cv.COLOR_RGB2Luv)
코드
<!DOCTYPE html>
<html lang="en">
<head>
<title>Getting Started with images</title>
</head>
<body>
<input type="file" id="addFile"/>
<img id="inputImg" alt="이미지를 추가하세요.">
<canvas id="canvas" width="300" height="300"></canvas>
<canvas id="canvasOutput"></canvas>
<canvas id="canvasOutputGray"></canvas>
<canvas id="canvasOutputLuv"></canvas>
<button id="btn">click button</button>
<script type="text/javascript">
var img = document.getElementById('inputImg');
var file = document.getElementById('addFile');
file.addEventListener("change", (e) => {
console.log(e.target.files);
img.src = URL.createObjectURL(e.target.files[0]);
});
// Read image
img.addEventListener("load", (e)=> {
let mat = cv.imread(img);
cv.imshow('canvas', mat);
mat.delete();
});
var button = document.getElementById('btn');
button.onclick = function() {
var canvasInput = document.getElementById('canvas');
let ctx = canvasInput.getContext('2d');
let imgData = ctx.getImageData(0, 0, canvasInput.width, canvasInput.height);
let src = cv.matFromImageData(imgData);
cv.imshow('canvasOutput',src);
src.delete();
let canvas = cv.imread('canvasOutput');
let dst_gray = new cv.Mat();
let dst_luv = new cv.Mat();
cv.cvtColor(canvas, dst_gray, cv.COLOR_RGBA2GRAY);
cv.cvtColor(canvas, dst_luv, cv.COLOR_RGB2Luv);
cv.imshow('canvasOutputGray', dst_gray);
cv.imshow('canvasOutputLuv', dst_luv);
canvas.delete();
dst.delete();
}
</script>
<script async src="opencv.js" type="text/javascript"></script>
</body>
</html>참고자료
https://docs.opencv.org/4.x/df/d24/tutorial_js_image_display.html
OpenCV: Getting Started with Images
Goals Learn how to read an image and how to display it in a web. Read an image OpenCV.js saves images as cv.Mat type. We use HTML canvas element to transfer cv.Mat to the web or in reverse. The ImageData interface can represent or set the underlying pixel
docs.opencv.org
'📦 개발 > opencv' 카테고리의 다른 글
| [opencv] 보드판 생성 (0) | 2023.01.31 |
|---|---|
| [opencv] 이미지 처리 궁금한 것 정리 (0) | 2023.01.28 |
| [opencv] opencv.js template matching (0) | 2023.01.14 |