아래 이미지와 같이 컬러피커를 개발할 일이 있었다. 빨간 원으로 표시되어 있는 아이콘을 활용해서, 주변 컬러를 직접 선택할 수 있는 기능을 개발해야하였다. 어떻게 개발을 해야할지 막막했었는데 검색을 해보니 간단하게 EyeDropper API 를 통해서 개발할 수 있다는 것을 알게 되었다.
🎈 EyeDropper API
이 API는 구글과 엣지에서만 지원하는 기능이다. 아래와 같이 간단하게 사용할 수 있다.
const eyeDropper = new EyeDropper();
let color = '';
eyeDropper
.open()
.then((result) => {
color = result.sRGBHex;
console.log(color);
})
.catch((e) => {
});
});
컬러를 선택하면 hext 값으로 반환받을 수 있다.
아래는 간단하게 활용한 예이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<button>버튼</button>
<body>
<script>
document.querySelector('button').addEventListener('click', function() {
const eyeDropper = new EyeDropper();
let color = '';
eyeDropper
.open()
.then((result) => {
color = result.sRGBHex;
console.log(color);
})
.catch((e) => {
});
});
</script>
</body>
</html>
✨ 크롬과 엣지에서만 지원하기 때문에 다른 브라우저에 대한 처리를 해줘야 한다!
'Javascript' 카테고리의 다른 글
| [Javascript] 소수점 표현 (0) | 2025.04.11 |
|---|---|
| [Javascript] 클립보드 (0) | 2025.04.06 |
| 비동기함수 순차 실행 (0) | 2025.01.21 |
| [자바스크립트 - Canvas] 1. 시작하기 - 도형 그리기 (0) | 2023.03.20 |
| [자바스크립트-배열] splice, slice 정리 (0) | 2023.03.16 |
