Image color picker using html javascript - codewitrandom

Image color picker using html javascript - codewitrandom 

Image color picker using html javascript - codewitrandom


 Welcome🎉 to Code With Random blog. In this blog, we learn that how we create an image color picker. We use HTML, and javascript for this image color picker. Hope you enjoy our blog so let's start with a basic HTML structure for an image color picker. 

HTML code 

 <!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>  
There is all HTML code for the image color picker. Now, you can see output without javascript, then we write javascript for the image color picker . we did not use any css styling for this project.
output
Image color picker using html javascript - codewitrandom


Javascript code 

We use javascript for image preview and then use eyedropper then track rgbhex color so start writing javascript.


 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.");  
     })  
 })  
Final output

Image color picker using html javascript - codewitrandom

Image color picker using html javascript - codewitrandom

Image color picker using html javascript - codewitrandom

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the image color picker  you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create an Image color picker using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post