비전공자 개발일기

Image Color Picker 본문

Javascript

Image Color Picker

HiroDaegu 2022. 9. 24. 18:37
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
</head>
<body>
  <button class="open-picker">Open Color Picker</button>  
  <input type="file" id="img-select">  
  <!-- Picker color code will be shown here -->  
  <p class="res"></p>  
  <!-- Selected image will be shown here -->  
  <img style="max-width: 90vw;" src="" alt="" class="preview">  
</body>
</html>
const imgInput = document.querySelector('#img-select')  
const imgPreview = document.querySelector('.preview')  
if(!window.EyeDropper){  
  alert("Your browser does not support this feature")  
}  
const eyeDropper = new EyeDropper()  
const pickerBtn = document.querySelector('.open-picker')  
const result = document.querySelector('.res')  
imgInput.addEventListener('change', function() {  
 const file = this.files[0]  
 if(!file) return  
 const reader = new FileReader()  
 reader.addEventListener('load', function() {  
  imgPreview.src = this.result  
 })  
 reader.readAsDataURL(file)  
})  
pickerBtn.addEventListener('click', function() {  
  eyeDropper.open()  
    .then(res => {  
      result.innerHTML = `Picked Color: <b>${res.sRGBHex}</b>`  
    })  
    .catch(err => {  
      console.log("User canceled the selection.");  
    })  
})
728x90
LIST

'Javascript' 카테고리의 다른 글

Dino Game  (0) 2022.09.29
Stopwatch  (0) 2022.09.27
Vertical Carousel  (0) 2022.09.19
Drum Kit 2  (0) 2022.09.18
Neomorphic Analog Clock  (0) 2022.09.16
'Javascript' Related Articles more