<!DOCTYPE html>
<html>
<head>
<script>
///////////////
// 전역변수부
///////////////
let inCanvas, inCtx, inPaper; // 입력 영상 관련
let outCanvas, outCtx, outPaper; // 출력 영상 관련
let inImage, inH, inW; // 2차원배열, 높이, 폭
let outImage, outH, outW; // 2차원배열, 높이, 폭
let inFile;
///////////////
// 공통 함수부: Open(),Display()...
///////////////
function init(){
inCanvas = document.getElementById("inCanvas"); // 도화지
inCtx = inCanvas.getContext("2d"); // 물감, 붓이 들은 통
outCanvas = document.getElementById("outCanvas"); // 도화지
outCtx = outCanvas.getContext("2d"); // 물감, 붓이 들은 통
// alert("init()끝");
}
//파일에서 선택한 이미지를 inImage에 저장 및 출력
function openImage() {
inFile = document.getElementById("inFile").files[0]; // 선택한 RAW 파일(LENNA512.RAW)
// (중요!) 선택한 이미지의 크기를 확인
inH = inW = Math.sqrt(inFile.size);//128, 256,512,1024...
// 이미지 크기의 메모리(2차원배열)를 확보
inImage = new Array(inH);
for (let i = 0; i < inH; i++)
inImage[i] = new Array(inW);
// 파일 --> 메모리
let reader = new FileReader();
reader.readAsBinaryString(inFile);
reader.onload = function () {
let blob = reader.result; // 파일을 한 덩어리(blob)으로 가져옴.
// 덩어리(blob)에서 한점한점 뽑아서, 배열에 넣기... 몇번 반복? 512x512
for (let i = 0; i < inH; i++) {
for (let k = 0; k < inW; k++) {
let sPixel = (i * inH + k); // 시작 위치
let ePixel = (i * inH + k) + 1; // 끝 위치
inImage[i][k] = blob.slice(sPixel, ePixel).charCodeAt(0); // 0~1까지 뽑아라. 0만 뽑힘.
}
}
// 도화기 크기를 이미지 크기로 조절
inCanvas.height = inH;
inCanvas.width = inH;
//** 입력 메모리(inImage)를 페이퍼에 콕콕 찍어서 출력한 후, 페이퍼를 캔버스에 떡 붙이기.
inPaper = inCtx.createImageData(inH, inW); // 이미지 크기의 빈 종이를 준비
for (let i = 0; i < inH; i++) {
for (let k = 0; k < inW; k++) {
let px = inImage[i][k]; //'뙓' --> 223
inPaper.data[(i * inH + k) * 4 + 0] = px; // Red
inPaper.data[(i * inH + k) * 4 + 1] = px; // Green
inPaper.data[(i * inH + k) * 4 + 2] = px; // Blue
inPaper.data[(i * inH + k) * 4 + 3] = 255; // Alpha (투명도)
}
}
inCtx.putImageData(inPaper, 0, 0);
}
}
//outImage를 출력할때 사용하는 함수
function displayImage() {
outCanvas.height = outH;
outCanvas.width = outH;
outPaper = outCtx.createImageData(outH, outW); // 이미지 크기의 빈 종이를 준비
for (let i = 0; i < outH; i++) {
for (let k = 0; k < outW; k++) {
let px = outImage[i][k]; //'뙓' --> 223
outPaper.data[(i * outH + k) * 4 + 0] = px; // Red
outPaper.data[(i * outH + k) * 4 + 1] = px; // Green
outPaper.data[(i * outH + k) * 4 + 2] = px; // Blue
outPaper.data[(i * outH + k) * 4 + 3] = 255; // Alpha (투명도)
}
}
outCtx.putImageData(outPaper, 0, 0);
}
//select 값을 받아와 그에 해당하는 함수를 실행
function selectAlgorithm(selNum){
switch(parseInt(selNum.value)){
case 101://동일영상
equalImage();break;
case 102://반전영상
reverseImage();break;
case 103://파라볼라(캡)
paraCap();break;
case 201:// 이동
moveImage();break;
case 202:// 회전
rotateImage();break;
case 301:// 엠보싱
embossImage();break;
case 302:// 블러링
blurrImage();break;
case 401:// 스트레칭
stretchImage();break;
case 402:// 엔드-인
endInImage();break;
case 403:// 평활화
equalizeImage();break;
}
}
</script>
</head>
<body onload="init()">
<h1>영상처리 프로그램(GA, RTM, 1.0)</h1>
<form>
//파일선택
<input type="file" id="inFile" onchange="openImage()"/> <br>
//select에 이미지처리이름과 처리할 값을 매칭해놓음
<select name="pixel" onchange="selectAlgorithm(this.form.pixel)">
<option value="0">*화소점 처리*</option>
<optgroup>
<option value="101">동일 영상</option>
<option value="102">영상 반전</option>
<option value="103">파라볼라 (Cap)</option>
</optgroup>
</select>
<select name="geometry" onchange="selectAlgorithm(this.form.geometry)">
<option value="0">*기하학 처리*</option>
<option value="201">이동</option>
<option value="202">회전</option>
</select>
</select>
<select name="area" onchange="selectAlgorithm(this.form.area)">
<option value="0">*화소영역 처리*</option>
<option value="301">엠보싱</option>
<option value="302">블러링</option>
</select>
<select name="histo" onchange="selectAlgorithm(this.form.histo)">
<option value="0">*히스토그램 처리*</option>
<option value="401">스트레칭</option>
<option value="402">엔드-인</option>
<option value="403">평활화</option>
</select>
</form>
<br>
//inImage가 출력될 캔버스
<canvas id="inCanvas" style="background-color:lightgreen"></canvas>
//outImage가 출력될 캔버스
<canvas id="outCanvas" style="background-color:rgb(95, 61, 173)"></canvas>
</body>
</html>
