자바스크립트를 이용한 개인 프로젝트 - 9(영상 처리 알고리즘)
2021/04/01(목)
엠보싱/블러링 알고리즘 참고
https://cordingdoah.tistory.com/91
자바스크립트를 이용한 개인 프로젝트 - 8(영상 처리 알고리즘)
2021/04/01(목) 좌우반전/상하반전/90도회전 알고리즘 참고 https://cordingdoah.tistory.com/90 자바스크립트를 이용한 개인 프로젝트 - 7(영상 처리 알고리즘) 2021/04/01(목) 확대/축소 알고리즘 설명 참고 htt..
cordingdoah.tistory.com
영상처리 알고리즘 : 샤프닝, 가우시안, 고주파샤프닝 구현하기
바로 고!!
마스크의 원리는 위에 링크를 참조~
<샤프닝>
//샤프닝
function sharpeImage() {
clickEventDown();
// 샤프닝 화소 영역 처리
var mask = [[0., -1., 0.],
[-1., 5., -1.],
[0., -1., 0.]];
//입시 입력 배열
tmpInputArray = new Array(outHeight + 2); // 2칸 큰 배열
for (var i = 0; i < outHeight + 2; i++)
tmpInputArray[i] = new Array(outWidth + 2);
//임시 배열 초기화
for (var i = 0; i < outHeight + 2; i++)
for (var k = 0; k < outWidth + 2; k++)
tmpInputArray[i][k] = String.fromCharCode(127);
//임시배열 --> 입시 입력
for (var i = 0; i < outHeight; i++)
for (var k = 0; k < outWidth; k++)
tmpInputArray[i + 1][k + 1] = outImageArray[i][k];
//임시 출력 배열
tmpOutputArray = new Array(outHeight); // 2칸 큰 배열
for (var i = 0; i < outHeight; i++)
tmpOutputArray[i] = new Array(outWidth);
// ***** 진짜 영상처리 알고리즘 *****
for (var i = 0; i < outHeight; i++) {
for (var k = 0; k < outWidth; k++) {
var s = 0.0;
for (var m = 0; m < 3; m++)
for (var n = 0; n < 3; n++) {
s += mask[m][n] * tmpInputArray[i + m][k + n].charCodeAt(0);
}
tmpOutputArray[i][k] = s;
}
}
//임시출력 --> 진짜 출력 배열
for (var i = 0; i < outHeight; i++)
for (var k = 0; k < outWidth; k++) {
var v = tmpOutputArray[i][k];
if (v > 255) {
v = 255.0;
}
else if (v < 0) {
v = 0.0;
}
outImageArray[i][k] = String.fromCharCode(v);
}
displayImage();
clickEvent();
}
1. 샤프닝 마스크 선언
2. 2칸 더 큰 임시배열 선언 후 127로 초기화
3. 임시배열에 사진 배열 넣어주기
4. 각 마스크와 임시배열의 요소 값들을 곱하고 모두 더해 배열에 저장
* 샤프닝 마스크는 모두 더해도 0이 아니기 때문에 127을 더해줄 필요가 없음
5. 배열 값이 0~255사이 값인지 확인하고 if문 처리
6. 출력 메소드 호출
--> 샤프닝 결과화면
<가우시안>
//가우시안
function gaussianImage() {
clickEventDown();
//가우시안 화소 영역 처리
var mask = [[1 / 16., 1 / 8., 1 / 16.],
[1 / 8., 1 / 4., 1 / 8.],
[1 / 16., 1 / 8., 1 / 16.]];
//입시 입력 배열
tmpInputArray = new Array(outHeight + 2); // 2칸 큰 배열
for (var i = 0; i < outHeight + 2; i++)
tmpInputArray[i] = new Array(outWidth + 2);
//임시 배열 초기화
for (var i = 0; i < outHeight + 2; i++)
for (var k = 0; k < outWidth + 2; k++)
tmpInputArray[i][k] = String.fromCharCode(127);
//임시배열 --> 입시 입력
for (var i = 0; i < outHeight; i++)
for (var k = 0; k < outWidth; k++)
tmpInputArray[i + 1][k + 1] = outImageArray[i][k];
//임시 출력 배열
tmpOutputArray = new Array(outHeight); // 2칸 큰 배열
for (var i = 0; i < outHeight; i++)
tmpOutputArray[i] = new Array(outWidth);
// ***** 진짜 영상처리 알고리즘 *****
for (var i = 0; i < outHeight; i++) {
for (var k = 0; k < outWidth; k++) {
var s = 0.0;
for (var m = 0; m < 3; m++)
for (var n = 0; n < 3; n++) {
s += mask[m][n] * tmpInputArray[i + m][k + n].charCodeAt(0);
}
tmpOutputArray[i][k] = s;
}
}
//임시출력 --> 진짜 출력 배열
for (var i = 0; i < outHeight; i++)
for (var k = 0; k < outWidth; k++) {
var v = tmpOutputArray[i][k];
if (v > 255) {
v = 255.0;
}
else if (v < 0) {
v = 0.0;
}
outImageArray[i][k] = String.fromCharCode(v);
}
displayImage();
clickEvent();
}
1. 가우시안 마스크 선언
2. 2칸 더 큰 임시배열 선언 후 127로 초기화
3. 임시배열에 사진 배열 넣어주기
4. 각 마스크와 임시배열의 요소 값들을 곱하고 모두 더해 배열에 저장
* 가우시안 마스크는 모두 더해도 0이 아니기 때문에 127을 더해줄 필요가 없음
5. 배열 값이 0~255사이 값인지 확인하고 if문 처리
6. 출력 메소드 호출
--> 가우시안 결과화면
<고주파 샤프닝>
//고주파 샤프닝
function hpfSharpeImage() {
clickEventDown();
//고주파 화소 영역 처리
var mask = [[-1 / 9., -1 / 9., -1 / 9.],
[-1 / 9., 8 / 9., -1 / 9.],
[-1 / 9., -1 / 9., -1 / 9.]];
//입시 입력 배열
tmpInputArray = new Array(outHeight + 2); // 2칸 큰 배열
for (var i = 0; i < outHeight + 2; i++)
tmpInputArray[i] = new Array(outWidth + 2);
//임시 배열 초기화
for (var i = 0; i < outHeight + 2; i++)
for (var k = 0; k < outWidth + 2; k++)
tmpInputArray[i][k] = String.fromCharCode(127);
//임시배열 --> 입시 입력
for (var i = 0; i < outHeight; i++)
for (var k = 0; k < outWidth; k++)
tmpInputArray[i + 1][k + 1] = outImageArray[i][k];
//임시 출력 배열
tmpOutputArray = new Array(outHeight); // 2칸 큰 배열
for (var i = 0; i < outHeight; i++)
tmpOutputArray[i] = new Array(outWidth);
// ***** 진짜 영상처리 알고리즘 *****
for (var i = 0; i < outHeight; i++) {
for (var k = 0; k < outWidth; k++) {
var s = 0.0;
for (var m = 0; m < 3; m++)
for (var n = 0; n < 3; n++) {
s += 100 * mask[m][n] * tmpInputArray[i + m][k + n].charCodeAt(0);
}
tmpOutputArray[i][k] = s;
}
}
//임시출력 --> 진짜 출력 배열
for (var i = 0; i < outHeight; i++)
for (var k = 0; k < outWidth; k++) {
var v = tmpOutputArray[i][k];
if (v > 255) {
v = 255.0;
}
else if (v < 0) {
v = 0.0;
}
outImageArray[i][k] = String.fromCharCode(v);
}
displayImage();
clickEvent();
}
1. 고주파 샤프닝 마스크 선언
2. 2칸 더 큰 임시배열 선언 후 127로 초기화
3. 임시배열에 사진 배열 넣어주기
4. 각 마스크와 임시배열의 요소 값들을 곱하고 모두 더해 배열에 저장
* 고주파 샤프닝 마스크는 모두 더해면 0이지만 처리하지 않아도 잘 나오기 때문에 127더하는 처리를 하지 않았음
5. 배열 값이 0~255사이 값인지 확인하고 if문 처리
6. 출력 메소드 호출
--> 고주파 샤프닝 결과화면
