Creating a image color picker with JS

#javascript #webdev #beginners #tutorial

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

Shuvo

Frontend Developer and YouTuber. Channel link: https://www.youtube.com/c/AngleBrace

Was it helpful? Support me on Patreon

Top comments (4)

Jon Randy 🎖️ • Nov 12 '21

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.