javascript_javascript 스킬을 통해 사진을 캐릭터 그림으로 변환

자바스크립트를 통해 사진을 캐릭터 그림으로 변환

1. 업로드된 이미지 객체 데이터 가져오기
자바스크립트는 로컬로 업로드된 이미지의 데이터를 직접 가져올 수 없지만 html5는 이 문제를 해결할 수 있습니다. HTML5의 FileReader 인터페이스는 이미지 객체의 데이터를 메모리로 읽어온 다음 인터페이스의 진행 이벤트(Progress Events)를 통해 데이터에 액세스할 수 있습니다.
브라우저 지원:
1. Internet Explorer: 10
2. Firefox: 10
3. Opera: 12
5.

코드 복사 코드는 다음과 같습니다.

var reader = new FileReader(); FileReader 인터페이스

reader.readAsDataURL(fileBtn.files[0]); //fileBtn은 파일 업로드 제어 객체입니다.
reader.onload = function() { //onload 이벤트에서 이미지 데이터에 액세스합니다.
img .src = 리더.결과 }

2. 이미지 개체의 픽셀 가져오기이미지 개체의 getImageData 메서드는 개체를 반환합니다. 각 픽셀의 rgba 값은 해당 데이터 속성에 저장됩니다. rgba는 각각 값에 해당하며, getImageData.data의 값이 [1,2,3,4,5,6,7,8]이라고 가정하면 getImageData 객체 범위에는 다음이 포함됩니다. 2픽셀의 첫 번째 픽셀의 rgba 값은 각각 1,2,3,4이고 두 번째 픽셀의 rgba 값은 4,5,6,7,8입니다. 따라서 각 픽셀의 rgba 값을 얻으려면 그 인덱스에 해당 픽셀의 인덱스 값에 4를 곱한 후 getGray()를 통해 계조를 계산해야 합니다.

코드 복사 코드는 다음과 같습니다.

var imgData = c.getImageData(0, 0, img .width, img.height);

var imgDataArr = imgData.data;
var imgDataWidth = imgData.width;
for (h = 0; h for (w = 0; w var index = (w imgDataWidth * h) * 4 var r = imgDataArr[인덱스 0];
var g = imgDataArr[인덱스 1];
var b = imgDataArr[인덱스 2]
}
}



3. rgb 값을 기준으로 그레이스케일을 계산합니다
다양한 RGB 공간에는 그레이스케일에 대한 여러 계산 공식이 있습니다.

Simplified sRGB IEC61966 -2.1 [gamma] =2.20]회색 = (R^2.2 * 0.2126 G^2.2 * 0.7152 B^2.2 * 0.0722)^(1/2.2)

2. Adobe RGB (1998) [gamma=2.20]
회색 = (R^2.2 * 0.2973 G^2.2 * 0.6274 B^2.2 * 0.0753)^(1/2.2)
3. Apple RGB [감마=1.80]
회색 = (R^1.8 * 0.2446 G^1.8 * 0.6720 B^1.8 * 0.0833)^(1/1.8)
4. ColorMatch RGB [감마=1.8]
회색 = (R^1.8 * 0.2750 G^1.8 * 0.6581 B^1.8 * 0.0670)^( 1/1.8)
5. 단순화된 KODAK DC 시리즈 디지털 카메라 [감마=2.2]
회색 = (R^2.2 * 0.2229 G^2.2 * 0.7175 B^2.2 * 0.0595)^(1/ 2.2)




코드 복사

코드는 다음과 같습니다.// rgb 값을 기준으로 그레이스케일을 계산합니다 function getGray(r, g, b) {

return 0.299 * r 0.578 * g 0.114 * b

}



4. 그레이스케일을 기반으로 해당 문자 생성
다른 그레이스케일을 해당 문자로 대체합니다. 원칙적으로 더 어두운 그레이스케일의 픽셀은 더 복잡한 문자를 사용해야 합니다. 이는 단지 테스트 버전일 뿐입니다.

코드 조각:

코드 복사

코드는 다음과 같습니다.

// 회색조를 기반으로 해당 문자 생성
function toText(g) {
if (g <= 30) {
return '8′
} else if ( g > 30 && g <= 60) {
                                         } else if (g > 120 <= 150) {
'*' 반환
} else if (g > 150 && g <= 180) {
return 'o' ;
} else if (g > 180 && g <= 210) {
return '!'
} else if ( g > 210 && g <= 240) {
return ';';
} else {
         원리를 명확히 하기 위해 일부 코드 조각이 제공되며 누구나 자유롭게 플레이할 수 있습니다. 구현 방법.
코드를 다운로드하려면 여기를 클릭하세요