[JavaScript] 자바스크립트에서 이미지의 RGBA 값 확인하기
2022. 7. 27. 22:30ㆍProgram/JavaScript
207_자바스크립트에서 이미지의 RGBA 값 확인하기
[적용]
- 마우스가 가리키는 이미지의 화소 정보를 확인하고 싶을 때
- 이미지에 포함된 색 정보를 확인하고 싶을 때
[내용]
getImageData()를 사용해 마우스 커서가 가리키는 위치의 색 정보를 구할 수 있다.
캔버스 요소를 mousemove 이벤트로 감시하여 마우스 커서의 좌표를 kayerX와 layerY 로 가져온다.
getImagedata()의 첫 번째와 두 번쨰 인수에 해당 좌표를 할당하여 화소의 배열을 가져올 수 있다.
화소 정보는 CSS의 rgba()를 통해 표시한다.
HTML index.html
<body>
<canvas id="my-canvas" width="100" height="120"></canvas>
<p class="log"></p>
</body>JavaScript main.js
// 캔버스 요소 참조
const canvas = document.querySelector('#my-canvas');
// 콘텍스트 가져오기
const context = canvas.getContext('2d');
// Image 인스턴스 생성
const img = new Image();
// 이미지 로딩 후 처리
img.onload = () => {
// 콘텍스트로 캔버스에 그리기
context.drawImage(img, 0, 0);
};
// 이미지 로딩 시작
img.src = 'sample.jpg';
// 마우스 이동 시
canvas.addEventListener('mousemove', (event) => {
// 마우스 좌표 가져오기
const x = event.layerX;
const y = event.layerY;
// imageData 가져오기
const imageData = context.getImageData(x, y, 1, 1);
// 화소 배열 가져오기
const data = imageData.data;
const r = data[0]; // 빨
const g = data[1]; // 녹
const b = data[2]; // 파
const a = data[3]; // 알파
// 문자열로 색 정보 다루기
const color = `rgba(${r}, ${g}, ${b}, ${a})`;
const el = document.querySelector('.log');
// 배경색 지정
el.style.background = color;
// 정보를 문자로 표시
el.textContent = color;
});
실행결과
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트에서 DataURL로 캔버스에 이미지 표시하기 (0) | 2022.07.27 |
|---|---|
| [JavaScript] 자바스크립트에서 캔버스의 이미지 가공하기 (0) | 2022.07.27 |
| [JavaScript] 자바스크립트에서 캔버스 화소 정보 다루기 (0) | 2022.07.27 |
| [JavaScript] 자바스크립트에서 캔버스에 이미지 붙여넣기 (0) | 2022.07.27 |
| [JavaScript] 자바스크립트에서 캔버스 요소 색칠하기/선 그리기 (0) | 2022.07.27 |