ShuvoIn this article I am going to show you how you can create this image color picker using JavaScript and the new EyeDropper API.
Let's start by creating the index.html
<!DOCTYPE html>
<html lang="en">
<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>Image color picker</title>
</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">
<script src="main.js"></script>
</body>
</html>
And now lets create the main.js and when user chooses an image we want to show it in our img element. We will use FileReader for that.
const imgInput = document.querySelector('#img-select')
const imgPreview = document.querySelector('.preview')
imgInput.addEventListener('change', function() {
const file = this.files[0]
// If the user doesn't select an image then don't do anything
if(!file) return
const reader = new FileReader()
reader.addEventListener('load', function() {
imgPreview.src = this.result
})
reader.readAsDataURL(file)
})
Great stuff!!! Now when the user clicks on the Open Color Picker button we want to open a color picker. For that we will use the EyeDropper API.
const imgInput = document.querySelector('#img-select')
const imgPreview = document.querySelector('.preview')
if(!window.EyeDropper){
alert("Your browser does not support this feature")
}
// Creating a new instance of EyeDropper
const eyeDropper = new EyeDropper()
const pickerBtn = document.querySelector('.open-picker')
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() {
// Open the color picker
eyeDropper.open()
})
And finally when the user picks a color we want to show the color code.
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.");
})
})
And we are done! We have successfully a image color picker using JavaScript.
Make sure you checkout my other articles and YouTube channel
Was it helpful? Support me on Patreon
