영상 처리 프로그래밍 (컬러) - 전처리부

raw파일만 사용 가능했던 프로그램을 jpg파일도 사용 가능하도록 수정

<!DOCTYPE html>
<html>
	<head>
    <meta charset="UTF-8">
    <title>영상처리</title> 
	<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"); // 물감, 붓이 들은 통
        }

        function openImage() {
            //inFile = document.getElementById("inFile").files[0]; // 선택한 RAW 파일(LENNA512.RAW)
            var fileNum = document.getElementById('fileNum').value;  // "55", "5"
            if (parseInt(fileNum) < 10)
                fileNum = "0" + fileNum; //"05"
            else
                fileNum = fileNum
            var inFname = "Nature99(Small)/picture" + fileNum + ".jpg"; //Nature99(Small)/pictue05.jpg
            //그림 파일 --> 이미지 객체로 넘기기
            var imageObject = new Image(); //빈 이미지 객체 생성
            imageObject.src = inFname; //imageObject로 들어옴 (파일이 이미지 객체에 쏙~~~ 들어감)
            imageObject.onload = function(){
                //중요! 입력 영상 크기 알아내기
                inH=imageObject.height;
                inW=imageObject.width;
                // 도화지 크기를 이미지 크기로 조절
                inCanvas.height = inH;
                inCanvas.width = inW;
                // 이미지 객체 --> 캔버스(화면)
                inCtx.drawImage(imageObject,0,0,inW,inH);   //inW,inH 순서 유의! 라이브러리마다 다름

                // 메모리 할당 (3차원 배열)
                inImage = new Array(3); // 3면
                for(var m=0; m<3; m++) {
                    inImage[m] = new Array(inH);
                    for(let n=0; n<inH; n++)
                        inImage[m][n] = new Array(inW);
                }
                // **중요!** 캔버스의 이미지(화면) --> 배열의 칼라로 추출
                var colorBlob = inCtx.getImageData(0,0,inW,inH);
                var R, G, B, Alpha;
                for (var i=0; i<inH; i++) {
                    for (var k=0; k<inW; k++) {
                        var pos = (i*inW + k) * 4; // 1픽셀 == 4byte
                        R = colorBlob.data[pos+0];
                        G = colorBlob.data[pos+1];
                        B = colorBlob.data[pos+2];
                        Alpha = colorBlob.data[pos+3];
                        inImage[0][i][k] = R;
                        inImage[1][i][k] = G;
                        inImage[2][i][k] = B;
                    }
                }
            }
        }

≫ 파일 선택기로 컬러이미지를 선택해 화면에 출력
≫ RGB변수를 따로 설정하여 3차원 배열에 출력

        function displayImage() {
            // 도화지 크기를 이미지 크기로 조절
            outCanvas.height = outH;
            outCanvas.width = outW;

            outPaper= outCtx.createImageData(outW, outH); // 이미지 크기의 빈 종이를 준비
            for (let i=0; i<outH; i++) {
                for (let k=0; k<outW; k++) {
                    let R = outImage[0][i][k];  
                    let G = outImage[1][i][k];  
                    let B = outImage[2][i][k];  
                    outPaper.data[(i*outW + k)*4 + 0] = R; // Red
                    outPaper.data[(i*outW + k)*4 + 1] = G; // Green
                    outPaper.data[(i*outW + k)*4 + 2] = B; // Blue
                    outPaper.data[(i*outW + k)*4 + 3] = 255; // Alpha (투명도)
                }
            }
            outCtx.putImageData(outPaper,0,0);
        }

≫ 영상 처리된 컬러 이미지를 화면에 출력