[책] 자바스크립트 코드 레시피 278 - 189일차

캔버스 화소 정보 다루기

• 화소 정보를 확인하고 싶을 때
• 이미지 가공을 위한 화소의 정보를 가져오고 싶을 때

구문

context.getImageData(x, y, width, height); // 지정 영역 화소 정보 가져오기

설명

getImageData()를 사용해 캔버스 콘텍스트의 화소 정보를 가져오며, 반환값은 ImageData객체입니다.

실습

index.html

<canvas id="my-canvas" width="100" height="100"></canvas>

---

script.js

const canvas = document.querySelector('#my-canvas');
const context = canvas.getContext('2d');
context.fillStyle = 'red';
context.fillRect(0, 0, 100, 100);
const imageData = context.getImageData(0, 0, 100, 100);
console.log(imageData.data);