In 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
Top comments (3)
As yet, this is an experimental, non-standard feature - only available on some browsers.... it probably won't be safe to rely on it being there (or working as you expect) for quite a while.
True, thats why I mentioned new API and also added the alert
Thank you ❤
But how do I make a magnifier like in here Image Color Picker ?