08-02 Color Image Processing Ver 0.1.html
▶HTML 페이지 웹 영상처리 구현 ver0.01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
// ---------------------------전역 변수부--------------------------------
var inCanvas, outCanvas, inCtx, outCtx, inPaper, outPaper; // 화면 관련 변수
var inFile; // 칼라 파일(PNG, JPG, BMP)
var inImage, outImage; // 입출력용 이미지 (3차원 배열) --> 제일 중요
var inH, inW, outH, outW; // 영상의 높이와 폭
</script>
<script>
// -------------------------------공통 함수부--------------------------
function init() {
inCanvas = document.getElementById('inCanvas'); // 도화지에 접근
outCanvas = document.getElementById('outCanvas'); // 도화지에 접근
inCtx = inCanvas.getContext('2d'); // 물감,붓이 들은 통
outCtx = outCanvas.getContext('2d'); // 물감,붓이 들은 통
}
function openImage() {
// inFile = document.getElementById("inFile").files[0]; // 선택한 파일 "c:/html/picture01.png"
var fileNum = document.getElementById('fileNum').value;
if ( parseInt(fileNum) < 9)
fileNum = "0" + fileNum;
else
fileNum = fileNum;
var inFname = "Nature99(Small)/picture" + fileNum + ".jpg";
// 그림 파일 --> 이미지 객체
var inPicture = new Image(); // 빈 이미지 객체
inPicture.src = inFname;
inPicture.onload = function() {
// 중요! 입력 영상의 크기를 알아내기
inH = inPicture.height;
inW = inPicture.width;
// 캔버스 크기 조절
inCanvas.height = inH;
inCanvas.width = inW;
inCtx.drawImage(inPicture,0,0,inW,inH);
// 메모리 할당 (3차원 배열)
inImage = new Array(3); // 3면
for(var m=0; m<3; m++) {
inImage[m] = new Array(inH);
for(var i=0; i<inH; i++)
inImage[m][i] = 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]; // Red
G = colorBlob.data[pos+1]; // Green
B = colorBlob.data[pos+2]; // Blue
// Alpha = colorBlob.data[pos+3]; // Alpha
inImage[0][i][k] = R;
inImage[1][i][k] = G;
inImage[2][i][k] = B;
}
}
}
}
function display() {
// 출력 메모리를 페이퍼에 출력하고, 페이퍼를 캔버스에 붙이기
outPaper = outCtx.createImageData(outW, outH); // 그림크기의 빈 종이를 준비
// 캔버스 크기
outCanvas.height = outH;
outCanvas.width = outW;
// 종이에 콕콕콕 찍기
for(var i=0; i<outH; i++) {
for (var k=0; k<outW; k++) {
var R = outImage[0][i][k]; // 0~255 사이의 값
var G = outImage[1][i][k]; // 0~255 사이의 값
var B = outImage[2][i][k]; // 0~255 사이의 값
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); // 종이를 캔버스에 붙이기.
}
function setSize(){
// 중요! 출력 영상 크기 결정 ---> 알고리즘에 의존
outH = inH;
outW = inW;
// 메모리 할당 (3차원 배열)
outImage = new Array(3); // 3면
for(var m=0; m<3; m++) {
outImage[m] = new Array(outH);
for(var i=0; i<outH; i++)
outImage[m][i] = new Array(outW);
}
}
// -------------------------------공통 함수부 끝--------------------------
</script>
<script>
// ---------------------------------영상처리 알고리즘---------------------------------
//======================== 기능 선택=======================
function selectAlgorithm(selectNum) {
switch(parseInt(selectNum.value)) {
case 101 : // 동일영상
equalImage();
break;
case 102 : // 밝게하기
brightImage();
break;
case 103 : // 그레이스케일
grayImage();
break;
case 104 : // 영상좌우반전
reverseVImage();
break;
case 105 : // 영상상하
reverseHImage();
break;
case 106 : // 영상축소
zoomOutImage();
break;
}
}
//==================동일 영상=================
function equalImage() { //case 101
// 중요! 출력 영상 크기 결정 ---> 알고리즘에 의존
outH = inH;
outW = inW;
// 메모리 할당 (3차원 배열)
outImage = new Array(3); // 3면
for(var m=0; m<3; m++) {
outImage[m] = new Array(outH);
for(var i=0; i<outH; i++)
outImage[m][i] = new Array(outW);
}
// ** 진짜 영상처리 알고리즘 **
for (var rgb=0; rgb < 3; rgb++) {
for (var i=0; i<inH; i++) {
for (var k=0; k<inW; k++) {
outImage[rgb][i][k] = inImage[rgb][i][k];
}
}
}
display();
}
//==================밝기 조절=================
function brightImage() { //case 102
setSize();
// ** 진짜 영상처리 알고리즘 **
var value=parseInt(prompt("숫자:", "100"));
for (var rgb=0; rgb < 3; rgb++) {
for (var i=0; i<inH; i++) {
for (var k=0; k<inW; k++) {
if (inImage[rgb][i][k] + 100 > 255)
outImage[rgb][i][k] = 255;
else
outImage[rgb][i][k] = inImage[rgb][i][k] + 100;
}
}
}
display();
}
//==================흑백 전환=================
function grayImage() { //case 103
setSize();
// ** 진짜 영상처리 알고리즘 **
for (var i=0; i<inH; i++) {
for (var k=0; k<inW; k++) {
var hap = inImage[0][i][k] + inImage[1][i][k] + inImage[2][i][k];
var avg = parseInt(hap / 3);
outImage[0][i][k] = outImage[1][i][k] = outImage[2][i][k] = avg;
}
}
display();
}
//==================영상 좌우 반전=================
function reverseVImage() { //case 104
setSize();
// ** 진짜 영상처리 알고리즘 **
for (var rgb=0; rgb < 3; rgb++) {
for (var i=0; i<inH; i++) {
for (var k=0; k<inW; k++) {
outImage[rgb][i][k] = inImage[rgb][i][inW-k-1];
}
}
display();
}
}
//==================영상 상하 반전=================
function reverseHImage() { //case 105
setSize();
// ** 진짜 영상처리 알고리즘 **
for (var rgb=0; rgb < 3; rgb++) {
for (var i=0; i<inH; i++) {
for (var k=0; k<inW; k++) {
outImage[rgb][i][k] = inImage[rgb][inH-i-1][k];
}
}
display();
}
}
//==================영상 축소=================
function zoomOutImage() { //case 106
//배율 입력
var scale = parseInt(prompt("배율", "2"));
//출력 영상 크기
outH = inH / scale;
outW = inW / scale;
//영상 크기 메모리 확보(3차원)
outImage = new Array(3) ;
for(var m=0; m<3; m++){
outImage[m] = new Array(outH);
for(var i=0; i<outH; i++)
outImage[m][i] = new Array(outW);
}
// ** 진짜 영상처리 알고리즘 **
for (var rgb=0; rgb < 3; rgb++) {
for (var i=0; i<inH; i++) {
for (var k=0; k<inW; k++) {
//******핵심 알고리즘(영상 축소)
outImage[rgb][parseInt(i/scale)][parseInt(k/scale)] = inImage[rgb][i][k];
}
}
display();
}
}
</script>
<!-- ----------------------------------Body---------------------------------- -->
</head>
<body onload="init()">
<h1> (MY)Color Image Processing Ver 0.01</h1>
<form>
<input type="number" id="fileNum"/>
<input type="button" id="inFile" value="이미지 열기" onclick="openImage()" /><br>
<select name='pixel' onchange="selectAlgorithm(this.form.pixel)">
<option value=0> 선택하세요(화소점) </option>
<optgroup label = "화소점 처리">
<option value=101> 동일 영상 </option>
<option value=102> 밝게 하기 </option>
<option value=103> 그레이스케일 </option>
<option value=104> 영상 좌우반전 </option>
<option value=105> 영상 상하반전 </option>
<option value=106> 영상 축소 </option>
</optgroup>
</select>
</form>
<br>
<canvas id="inCanvas" style="background-color:aqua"></canvas>
<canvas id="outCanvas" style="background-color:goldenrod"></canvas>
</body>
</html>'국비교육과정 > javascript' 카테고리의 다른 글
| [컬러영상처리]09-04 Color Image Processing(Alpha) Ver 0.1.html (0) | 2022.05.17 |
|---|
댓글