[JavaScript] 자바스크립트에서 이미지의 RGBA 값 확인하기

207_자바스크립트에서 이미지의 RGBA 값 확인하기 [적용] 마우스가 가리키는 이미지의 화소 정보를 확인하고 싶을 때 이미지에 포함된 색 정보를 확인하고 싶을 때 [내용] getImageData()를 사용해 마우스 커서가 가리키는 위치의 색 정보를 구할 수 있다. 캔버스 요소를 mousemove 이벤트로 감시하여 마우스 커서의 좌표를 kayerX와 layerY 로 가져온다. getImagedata()의 첫 번째와 두 번쨰 인수에 해당 좌표를 할당하여 화소의 배열을 가져올 수 있다. 화소 정보는 CSS의 rgba()를 통해 표시한다. HTML index.html JavaScript main.js // 캔버스 요소 참조 const canvas = document.querySelector('#my-canva..

2022.07.27