[JavaScript] 자바스크립트에서 캔버스의 이미지 가공하기
2022. 7. 27. 22:51ㆍProgram/JavaScript
208_자바스크립트에서 캔버스의 이미지 가공하기
[적용]
- 로딩한 이미지에 효과를 넣고 싶을 때
[문법]
| 메소드 | 의미 | 반환 |
| context.putImageData(이미지) | 이미지 데이터 입력 | 없음 |
[내용]
putImageData()는 이미지를 콘텍스트에 대입하는 메소드로,
이미지를 가져오는 getImageData()와 반대의 기능을 가진다.
다음 샘플은 첫 번째 캔버스 요소에 이미지를 배치하고 getImageData()로 화소 배열을 가져온다.
모노크롬 값을 계산하여 새로 작성한 ImageData 객체에 값을 할당하고
두 번째 캔버스 요소에 putImageData()를 사용해 값을 대입한 모노크롬 사진을 표시한다.
HTML index.html
<body>
<canvas id="canvas-original" width="100" height="120"></canvas>
<br />
<canvas id="canvas-effected" width="100" height="120"></canvas>
</body>JavaScript main.js
// 캔버스 요소 참조
const canvas1 = document.querySelector('#canvas-original');
// 콘텍스트 가져오기
const context1 = canvas1.getContext('2d');
// Image 인스턴스 생성
const img = new Image();
// 이미지 로딩 후 처리
img.onload = () => {
// 콘텍스트로 캔버스에 그리기
context1.drawImage(img, 0, 0);
// 화소 정보 가져오기
const imageData = context1.getImageData(0, 0, 150, 150);
const data = imageData.data;
const monoImageData = new ImageData(150, 150);
const monoArr = monoImageData.data;
for (let i = 0; i < data.length / 4; i += 1) {
// 화소 정보 가져오기
const r = data[i * 4 + 0];
const g = data[i * 4 + 1];
const b = data[i * 4 + 2];
const a = data[i * 4 + 3];
// 평균값 구하기(연산 간략화를 위함)
const color = (r + g + b) / 3;
// 새로운 색 지정
monoArr[i * 4 + 0] = color;
monoArr[i * 4 + 1] = color;
monoArr[i * 4 + 2] = color;
monoArr[i * 4 + 3] = a;
}
// 캔버스 요소 참조
const canvas2 = document.querySelector("#canvas-effected");
// 콘텍스트 가져오기
const context2 = canvas2.getContext('2d');
// 콘텍스트에 새로운 화소 정보 할당
context2.putImageData(monoImageData, 0, 0);
};
// 이미지 로딩 시작
img.src = 'sample.jpg';
실행결과
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트에서 PNG/JPEG DataURL로 불러오기 (0) | 2022.07.28 |
|---|---|
| [JavaScript] 자바스크립트에서 DataURL로 캔버스에 이미지 표시하기 (0) | 2022.07.27 |
| [JavaScript] 자바스크립트에서 이미지의 RGBA 값 확인하기 (0) | 2022.07.27 |
| [JavaScript] 자바스크립트에서 캔버스 화소 정보 다루기 (0) | 2022.07.27 |
| [JavaScript] 자바스크립트에서 캔버스에 이미지 붙여넣기 (0) | 2022.07.27 |