728x90
▶영상처리 기본코드 ->영상을 불러오고 밝기 반전 처리 기능
<JavaScript기본틀>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> GraySclale Image Processing</title>
<script lang="javascript">
//=========================================================== 전역 변수부==========================================================================
var inCanvas, inCtx, inPaper //inCtx->입력 캔버스에 사용할 물감과 도구 / inPaper -> 캔버스 위에 종이를 붙이는 개념 (잘 그려지려고)
var inFile, inImage; //입력 파일, 입력 이미지 (원본, 2차원 배열)
var inH, inW; //입력 영상의 높이 X 폭 --> 256*256
</script>
<script lang="javascript">
//=========================================================== 함수부부 ============================================================================
function init(){ //초기화 함수
inCanvas = document.getElementById('inCanvas'); //도화지에 접근
inCtx = inCanvas.getContext('2d'); //물감, 붓이 들은 통
}
//=========================================================== 영상을 넣는 과정 ============================================================================
//선택한 파일을 읽어서 메모리 (2차원 배열)에 넣고 , 화면 (캔버스)에 출력 ("중요")
function readRawImage(){
inFile = document.getElementById("inFile").files[0]; //선택한 파일 /var가 없어야 전역변수꺼로 지정
//(!중요) 이미지의 크기를 확인
inH = inW = 256;
//영상 크기의 2차원 메모리 확보
inImage = new Array(inH);
for(var i=0; i<inH; i++)
inImage[i] = new Array(inW);
//캔버스 크기 지정
inCanvas.height =inH;
inCanvas.width =inW;
//파일 -->메모리
var reader = new FileReader(); //파일의 내용을 (혹은 raw data)읽고 사용자의 컴퓨터에 저장하는것이 가능
reader.readAsBinaryString(inFile);
reader.onload = function () {
var blob = reader.result; //파일을 한 덩어리(blob)로 가져옴
//덩어리(blob)에서 한점한점 뽑아서 , 우리 배열(inImage)에 넣기
for(var i=0;i<inH;i++){
for(var k=0;k<inW;k++){
var sPixel = (i*inH+k); //시작 위치
var ePixel = (i*inH+k)+1; //끝 위치
inImage[i][k] = blob.slice(sPixel, ePixel); //0~1까지 뽑기: 0만 뽑힘//1차원을 2차원으로 만드는 기법
}
}
//**입력 메모리를 캔버스(페이퍼)에 출력한 후, 페이퍼를 캔버스에 붙이기**
inPaper = inCtx.createImageData(inH, inW); // 종이를 준비하기
for(var i=0;i<inH;i++){
for(var k=0;k<inW;k++){
var px = inImage[i][k].charCodeAt(0); // (깨지는 파일에서)'뙓'을 숫자 (129)로 변경
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] = 256; //AlPHA ->투명도 0-> (완전투명) 255-> alpha -> 투명도 안쓰겠다
}
}
inCtx.putImageData(inPaper,0,0); //종이를 캔버스 (0,0)에 붙이기 (왼쪽위 딱 붙여서)
}
}
</script>
<script lang="javascript">
function display(){
//**입력 메모리를 페이퍼에 출력한 후, 페이퍼를 캔버스에 붙이기
inPaper = inCtx.createImageData(inH, inW); //종이 준비하기
for(var i=0;i<inH;i++){
for(var k=0;k<inW;k++){
var px = inImage[i][k].charCodeAt(0); //(깨지는 파일에서)'뙓'을 숫자 (129)로 변경
//**진짜 핵심 알고리즘
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); // 종이를 캔버스 (0,0)에 붙이기 (왼쪽위 딱 붙여서)
}
//========================================================★★★★★★영상처리 함수 모음 중요★★★★★==========================================================
function addImage(){
var value = parseInt(prompt('숫자 입력:','100'));
for(var i=0;i<inH;i++){
for(var k=0;k<inW;k++){
var pixel = inImage[i][k].charCodeAt(0); //(깨지는 파일에서)'뙓'을 숫자 (129)로 변경
//**진짜 핵심 알고리즘
if(pixel + value > 255)
pixel=255;
else
pixel=pixel+value;
/////////////////////////
inImage[i][k] = String.fromCharCode(pixel); //숫자 (229)를 '늙'로 변경(꺠지는 글자로)
}
}
display();
}
function reverseImage(){
for(var i=0;i<inH;i++){
for(var k=0;k<inW;k++){
var pixel = inImage[i][k].charCodeAt(0); //'뙓'을 숫자(129)로 변경
// ** 진짜 핵심 알고리즘
pixel = 255 - pixel;
//////////////////////
inImage[i][k] = String.fromCharCode(pixel); // 숫자(229)를 '뉽'로 변경
}
}
display();
}
</script>
</head>
<body onload="init()"> <!--함수를 초기화 시키자/ intit()->script를 바디로 내리지 않아도 실행 가능하게 해줌-->
<input type="file" id="inFile" onchange="readRawImage()"/><br><br> <!--줄 바꿈-->
<input type="button" id="addImage" value="밝게하기" onclick="addImage()"/>
<input type="button" id="reverseImage" value="영상 색상 반전" onclick="reverseImage()"/>
<br>
<canvas id="inCanvas" style="background-color: antiquewhite"></canvas>
</body>
</html>
▶영상처리 Ver 0.5 (원본,밝기, 반전, 축소, 확대, 좌우미러, 상하 미러)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> GraySclale Image Processing ver.03</title>
<script lang="javascript">
//=========================================================== 전역 변수부==========================================================================
var inCanvas, outCanvas, inCtx, outCtx, inPaper, outPaper //화면관련
var inFile;
var inImage, outImage; //입력, 출력이미지(2차원 배열)
var inH, inW, outH, outW; //입력 영상, 출력 영상의 높이 X 폭
</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]; //선택한 파일 /var가 없어야 전역변수꺼로 지정
//(!중요) 이미지의 크기를 확인
inH = inW = Math.sqrt(inFile.size);
//영상 크기의 2차원 메모리 확보
inImage = new Array(inH);
for (var i = 0; i < inH; i++)
inImage[i] = new Array(inW);
//캔버스 크기 지정
inCanvas.height = inH;
inCanvas.width = inW;
//파일 -->메모리
var reader = new FileReader(); //파일의 내용을 (혹은 raw data)읽고 사용자의 컴퓨터에 저장하는것이 가능
reader.readAsBinaryString(inFile); //파일을 읽기 위해
reader.onload = function () { //onload -> 전체 페이지에 모든 외부리소스나 이미지가 전부 불러와진 이후에 작동
var blob = reader.result; //파일을 한 덩어리(blob)로 가져옴
//document.write(typeof blob);
//덩어리(blob)에서 한점한점 뽑아서 , 우리 배열(inImage)에 넣기
for (var i = 0; i < inH; i++) {
for (var k = 0; k < inW; k++) {
var sPixel = (i * inH + k); //시작 위치
var ePixel = (i * inH + k) + 1; //끝 위치
inImage[i][k] = blob.slice(sPixel, ePixel).charCodeAt(0); //0~1까지 뽑기: 0만 뽑힘//1차원을 2차원으로 만드는 기법//'꿹'을 읽어옴
}
}
//** 입력 메모리를 페이퍼에 출력한 후, 페이퍼를 캔버스에 붙이기 **
inPaper = inCtx.createImageData(inH, inW); // 종이를 준비하기
for(var i=0; i<inH; i++) {
for (var k=0; k<inW; k++) {
var px = inImage[i][k]; //'뙓'을 숫자(129)로 변경
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); // 종이를 캔버스 (0,0)에 붙이기 (왼쪽위 딱 붙여서)
}
}
function display() {
//**출력 메모리의 내용을 화면에 출력하기.**
outPaper = outCtx.createImageData(outH, outW); //종이 준비하기
//캔버스 크기 지정
outCanvas.height = outH;
outCanvas.width = outW;
for (var i = 0; i < outH; i++) {
for (var k = 0; k < outW; k++) {
var pix = outImage[i][k]; //(깨지는 파일에서)'뙓'을 숫자 (예)129)로 변경
//**진짜 핵심 알고리즘
outPaper.data[(i * outW + k) * 4 + 0] = pix; // red
outPaper.data[(i * outW + k) * 4 + 1] = pix; // Green
outPaper.data[(i * outW + k) * 4 + 2] = pix; // Blue
outPaper.data[(i * outW + k) * 4 + 3] = 255; // Alpha
/////////////////////////
}
}
outCtx.putImageData(outPaper, 0, 0); // 종이를 캔버스 (0,0)에 붙이기 (왼쪽위 딱 붙여서)
}
</script>
<script>
//=========================================영상처리 함수 모음=============================================================
function equalImage() { //동일영상
// 중요 ! 출력 영상의 크기를 결정 --> 알고리즘에 의존~
outH = inH;
outW = inW;
//영상 크기의 2차원 메모리 확보
outImage = new Array(outH);
for (var i = 0; i < outH; i++)
outImage[i] = new Array(outW);
//**영상처리 알고리즘 구현
for (var i = 0; i < inH; i++) {
for (var k = 0; k < inW; k++) {
outImage[i][k] = inImage[i][k];
}
}
display();
}
function reverseImage() { //영상 반전
// 중요 ! 출력 영상의 크기를 결정 --> 알고리즘에 의존~
outH = inH;
outW = inW;
//영상 크기의 2차원 메모리 확보
outImage = new Array(outH);
for (var i = 0; i < outH; i++)
outImage[i] = new Array(outW);
//** 영상처리 알고리즘 구현
for (var i = 0; i < inH; i++) {
for (var k = 0; k < inW; k++) {
outImage[i][k] = 255-inImage[i][k];
}
}
display();
}
function addImage() {// 영상 덧셈 알고리즘
// 중요 ! 출력 영상의 크기를 결정 --> 알고리즘에 의존~
outH = inH;
outW = inW;
//영상 크기의 2차원 메모리 확보
outImage = new Array(outH);
for (var i = 0; i < outH; i++)
outImage[i] = new Array(outW);
//**영상처리 알고리즘 구현
var value = parseInt(prompt("숫자:","0"));
for (var i = 0; i < inH; i++) {
for (var k = 0; k < inW; k++) {
var px =inImage[i][k];
if(px + value > 255)
px =255;
else
px = px + value;
outImage[i][k] = px;
}
}
display();
}
function zoomOutImage() { //영상 축소 알고리즘
//zoom ! 출력 영상의 크기를 결정 --> 알고리즘에 의존~
var scale = parseInt(prompt("축소배율(짝수):","2"));
outH = inH / scale;
outW = inW / scale;
//영상 크기의 2차원 메모리 확보
outImage = new Array(outH);
for (var i = 0; i < outH; i++)
outImage[i] = new Array(outW);
//**진짜 영상 처리(확대축소) 알고리즘
for (var i = 0; i < inH; i++) {
for (var k = 0; k < inW; k++) {
//******핵심 알고리즘(영상 축소)
outImage[parseInt(i/scale)][parseInt(k/scale)] = inImage[i][k];
}
}
display();
}
function zoomInImage() { //영상 확대 ★★★백워딩 기법으로 채워야 Hole(빈공간) 문제를 해결 할 수 있음
// 중요 ! 출력 영상의 크기를 결정 --> 알고리즘에 의존~
var scale = parseInt(prompt("확대배율(짝수):","2"));
outH = inH * scale; //영상의 폭높이를 입력 값의 비율에 맞춰서 증가
outW = inW * scale;
//영상 크기의 2차원 메모리 확보
outImage = new Array(outH);
for (var i = 0; i < outH; i++)
outImage[i] = new Array(outW);
//**진짜 영상 처리(확대축소) 알고리즘
for (var i = 0; i <outH; i++) { // 정방향 방법 --> 배열의 길이를 (outH)출력 길이로 //역방향 방법일 경우 -->배열의 길이(inH)로
for (var k = 0; k < outW; k++) {
//******핵심 알고리즘(영상 축소)***********
//outImage[parseInt(i*scale)][parseInt(k*scale)] = inImage[i][k]; // 정방향 방법 -> hole 발생
outImage [i][k]= inImage[parseInt(i/scale)][parseInt(k/scale)]; // 백워딩 기법 (input배열의 인덱스 곱셈을 통해 값을 넣으면 --> hole (빈공간) 문제 발생) / 먼저 확장된 배열의 인덱스를 배열의 확대값으로 나눈몫의 값 숫자의 인덱스 값을 원본이미지의 배열 인덱스 값을 불러옴
}
}
display();
}
function horizenReverse() { //좌우반전
// 중요 ! 출력 영상의 크기를 결정 --> 알고리즘에 의존~
outH = inH;
outW = inW;
//영상 크기의 2차원 메모리 확보
outImage = new Array(outH);
for (var i = 0; i < outH; i++)
outImage[i] = new Array(outW);
//**영상처리 알고리즘 구현
for (var i = 0; i < inH; i++) {
for (var k = 0; k < inW/2; k++) {
tmp = inImage[i][k];
inImage[i][k] = inImage[i][inW-k-1];
inImage[i][inW-k-1] = tmp;
}
}
for (var i = 0; i < inH; i++) {
for (var k = 0; k < inW; k++) {
outImage[i][k] = inImage[i][k];
}
}
display();
}
function verticalReverse() { //상하반전
// 중요 ! 출력 영상의 크기를 결정 --> 알고리즘에 의존~
outH = inH;
outW = inW;
//영상 크기의 2차원 메모리 확보
outImage = new Array(outH);
for (var i = 0; i < outH; i++)
outImage[i] = new Array(outW);
//**영상처리 알고리즘 구현
for (var i = 0; i < inH/2; i++) {
for (var k = 0; k < inW; k++) {
tmp = inImage[i][k];
inImage[i][k] = inImage[inH-i-1][k];
inImage[inH-i-1][k] = tmp;
}
}
for (var i = 0; i < inH; i++) {
for (var k = 0; k < inW; k++) {
outImage[i][k] = inImage[i][k];
}
}
display();
}
</script>
</head>
<body onload="init()">
<!--함수를 초기화 시키자/ intit()->script를 바디로 내리지 않아도 실행 가능하게 해줌-->
<input type="file" id="inFile" onchange="openImage()" /><br><br>
<input type="button" id="addImage" value="동일영상" onclick="equalImage()" />
<input type="button" id="reverseImage" value="영상 색상 반전" onclick="reverseImage()" />
<input type="button" id="addImage" value="밝게하기" onclick="addImage()" />
<input type="button" id="zoomOutImage" value="축소하기" style="background-color: white" onclick="zoomOutImage()" />
<input type="button" id="zoomInImage" value="확대하기" style="background-color: white" onclick="zoomInImage()" />
<input type="button" id="horizenReverse" value="좌우반전" style="background-color: goldenrod" onclick="horizenReverse()" />
<input type="button" id="verticalReverse" value="상하반전" style="background-color: goldenrod" onclick="verticalReverse()" />
<br>
<br>
<canvas id="inCanvas" style="background-color: antiquewhite"></canvas>
<canvas id="outCanvas" style="background-color: aqua"></canvas>
</body>
</html>728x90
'프론트앤드 > JavaScript' 카테고리의 다른 글
| [이미지 크기 백워프 기능 (0) | 2022.03.25 |
|---|---|
| slice( ) (0) | 2022.03.25 |
| 로그인 적합성 검사 코드 (0) | 2022.02.21 |
| [JavaScript]ArrowFunctions함수 (0) | 2022.01.25 |
| [JavaScript]연산과 조건 (0) | 2022.01.25 |
댓글