This article will not present the use of the new The way to create a color picker is relatively easy.<\/p>\n It consist in displaying an image, and retrieve the pixel color the user clicked on.<\/p>\n The Canvas API, allow us to get some data from images with the Then we need to find an image to create the color palette, this image will we displayed in the canvas element so it may have the dimensions of the canvas element (or vice versa).<\/p>\n NOTE<\/strong> You can chose any image you want.<\/p><\/blockquote>\n So we will create the The script will just create the palette, now we need to handle the click :<\/p>\n This is It !<\/p>\n The main usage is here, maybe a little styling, at least to change the cursor over the canvas.<\/p>\n We will simply change the mouse cursor when it’s over the Canvas :<\/p>\n The script is now finished …<\/p>\n But the color picker is not very usable, so I will now present you how to create a color picker to set the color in an input element.<\/p>\n As we want the color picker to be reusable, we need to create a function to manage picker :<\/p>\n And call the function to make things still working …<\/p>\n For sure you may want to use the picker when clicking on a button for example, so we will create the color picker in a floating div next to the mouse click.<\/p>\n First we need to create the The variables : Now you can create the picker next to a button clicked :<\/p>\n Ok, the color picker is displayed “on demand<\/em>” … but we have to remove it, when the user has clicked on a color, or when the user click else where in the document.<\/p>\n As we created a function And in the click<\/em> on canvas event callback (at the end of the function), simply add a call to the In order to manage a sort of cancellation event, when the user click on the document but not on the canvas we add a click<\/em> listener on window. This listener must be removed after element is removed.<\/p>\n So edit the function as this :<\/p>\n I think that the goal of a color picker is to retrieve a color, so we will add a call back function to our picker. This callback function will be called when the user choose a color :<\/p>\n So add a parameter to the function signature :<\/p>\n And in the click<\/em> on canvas event callback, instead of logging the color simply call the callback, with the color … :<\/p>\n And of course you need to edit the usage as this :<\/p>\n I’m don’t like the color value, I’d rather want to use a color in a hexadecimal value, so let’s create this color …<\/p>\n As I don’t want to re-invent the wheel, I get the function to convert decimal value of the RGB into hexadecimal from this site : http:\/\/www.javascripter.net\/faq\/rgbtohex.htm<\/a><\/p>\n I added this two functions in the color picker and in the click<\/em> on canvas event callback, I did this :<\/p>\n NOTE<\/strong>: I add the Voila ! The color picker is now reusable !<\/p>\n<input type=\"color\" \/><\/code>.<\/p>\n1. Introduction<\/h2>\n
getImageData<\/code> method.
\n
\n[ulp id=’tgm4cmEWcKUikZNn’]<\/p>\n2. The Skeleton<\/h2>\n
2.1 HTML Document<\/h3>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head lang="en">\r\n <meta charset="UTF-8">\r\n <title><\/title>\r\n <link rel="stylesheet" href="style.css" \/>\r\n<\/head>\r\n<body>\r\n<div id="colorpicker">\r\n <canvas width="300" height="300"><\/canvas>\r\n<\/div>\r\n<script src="script.js"><\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
2.2 Javascript File<\/h3>\n
script.js<\/code> file to add the image in the canvas element.<\/p>\n\r\n\/\/ first retrieve the canvas element\r\nvar canvasElement = document.querySelector('#colorpicker canvas');\r\n\/\/ Then get the 2D context of the Canvas\r\nvar canvasImage = canvasElement.getContext('2d');\r\n\r\n\/\/ Now create an image element\r\nvar image = new Image();\r\nimage.src = 'palette.png';\r\n\r\n\/\/ Just after the browser has finished to load the image we can add it in the canvas\r\nimage.addEventListener('load', function () {\r\n canvasImage.drawImage(image, 0, 0);\r\n});\r\n<\/pre>\n\r\n\/\/ first retrieve the canvas element\r\nvar canvasElement = document.querySelector('#colorpicker canvas');\r\n\/\/ Then get the 2D context of the Canvas\r\nvar canvasImage = canvasElement.getContext('2d');\r\n\r\n\/\/ Now create an image element\r\nvar image = new Image();\r\nimage.src = 'palette.png';\r\n\r\n\/\/ Just after the browser has finished to load the image we can add it in the canvas\r\nimage.addEventListener('load', function () {\r\n canvasImage.drawImage(image, 0, 0);\r\n\r\n \/\/ Handle the click on the palette\r\n canvasElement.addEventListener('click', function (event) {\r\n \/\/ Get the position of the mouse in the Canvas\r\n var x = event.pageX - this.offsetLeft;\r\n var y = event.pageY - this.offsetTop;\r\n\r\n \/\/ Get the Image Data\r\n var imageData = canvasImage.getImageData(x, y, 1, 1).data;\r\n\r\n \/\/ Convert into readable variable\r\n var Red = imageData[0];\r\n var Green = imageData[1];\r\n var Blue = imageData[2];\r\n var rgb = Red + ',' + Green + ',' + Blue;\r\n\r\n \/\/ Display the result in the console\r\n console.log(rgb);\r\n });\r\n});\r\n<\/pre>\n![\"HTML5](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/html5_color_picker_example_1.png\")
<\/a>2.3 Style with CSS<\/h3>\n
\r\ncanvas{\r\n cursor:crosshair;\r\n}\r\n<\/pre>\n3. Make it reusable<\/h2>\n
3.1 Create a wrapper function<\/h3>\n
\r\nfunction colorPicker(){\r\n \r\n \/\/ first retrieve the canvas element\r\n var canvasElement = document.querySelector('#colorpicker canvas');\r\n\r\n \/\/ Then get the 2D context of the Canvas\r\n var canvasImage = canvasElement.getContext('2d');\r\n\r\n \/\/ Now create an image element\r\n var image = new Image();\r\n image.src = 'palette.png';\r\n\r\n \/\/ Just after the browser has finished to load the image we can add it in the canvas\r\n image.addEventListener('load', function () {\r\n canvasImage.drawImage(image, 0, 0);\r\n \r\n \/\/ Handle the click on the palette \r\n canvasElement.addEventListener('click', function (event) {\r\n \/\/ Get the position of the mouse in the Canvas\r\n var x = event.pageX - this.offsetLeft;\r\n var y = event.pageY - this.offsetTop;\r\n\r\n \/\/ Get the Image Data\r\n var imageData = canvasImage.getImageData(x, y, 1, 1).data;\r\n \r\n \/\/ Convert into readable variable\r\n var Red = imageData[0];\r\n var Green = imageData[1];\r\n var Blue = imageData[2];\r\n var rgb = Red + ',' + Green + ',' + Blue;\r\n \r\n \/\/ Display the result in the console\r\n console.log(rgb);\r\n });\r\n });\r\n}\r\n<\/pre>\n\r\ncolorPicker();\r\n<\/pre>\n
3.2 Create the canvas picker on click<\/h3>\n
show()<\/code> function and add it in the colorPicker<\/code> function:<\/p>\n\r\nfunction colorPicker(){\r\n \r\n \/\/ Now create an image element\r\n var image = new Image();\r\n image.src = 'palette.png';\r\n\r\n \/\/ Create a div element\r\n \/\/ Create a canvas element in the div\r\n var divElement = document.createElement('div'),\r\n canvasElement = document.createElement('canvas'),\r\n canvasImage;\r\n\r\n \/\/ Get the mouse position\r\n var event = window.event,\r\n mouseX = event.pageX,\r\n mouseY = event.pageY;\r\n\r\n function show() {\r\n \r\n divElement.style.width = image.width + 'px'; \/\/ The element width is the palette image width\r\n divElement.style.height = image.height + 'px'; \/\/ The element height is the palette image height\r\n divElement.className += 'colorpicker'; \/\/ Add the class colorpicker to the div element\r\n\r\n divElement.style.position = 'absolute'; \/\/ The div position is absolute\r\n divElement.style.top = mouseY + 'px'; \/\/ Top position is the mouse Y position \r\n divElement.style.left = mouseX + 'px'; \/\/ Left position is the mouse X position \r\n \r\n canvasElement.width = image.width; \/\/ Canvas Width\r\n canvasElement.height = image.height; \/\/ Canvas Height\r\n canvasImage = canvasElement.getContext('2d');\r\n canvasImage.drawImage(image, 0, 0); \/\/ Drow image in canvas\r\n\r\n divElement.appendChild(canvasElement);\r\n\r\n \/\/ Display element by append it to the body\r\n document.querySelector('body').appendChild(divElement);\r\n }\r\n\r\n \/\/ Just after the browser has finished to load the image we can add it in the canvas\r\n image.addEventListener('load', function () {\r\n \r\n \/\/ Display the palette\r\n show();\r\n \r\n \/\/ Handle the click on the palette \r\n canvasElement.addEventListener('click', function (event) {\r\n \/\/ Get the position of the mouse in the Canvas\r\n var x = event.pageX - this.offsetLeft;\r\n var y = event.pageY - this.offsetTop;\r\n\r\n \/\/ Get the Image Data\r\n var imageData = canvasImage.getImageData(x, y, 1, 1).data;\r\n \r\n \/\/ Convert into readable variable\r\n var Red = imageData[0];\r\n var Green = imageData[1];\r\n var Blue = imageData[2];\r\n var rgb = Red + ',' + Green + ',' + Blue;\r\n \r\n \/\/ Display the result in the console\r\n console.log(rgb);\r\n });\r\n });\r\n}\r\n<\/pre>\nimage<\/code>, divElement<\/code>, canvasElement<\/code> and canvasImage<\/code> are only visible in the colorPicker<\/code> function so i can manipulate them in all functions declared in the colorPicker<\/code> closure<\/em>.<\/p>\n\r\n\r\nvar btn = document.getElementById('btn1');\r\nbtn.addEventListener('click', function(){\r\n colorPicker();\r\n});\r\n<\/pre>\n3.3 Remove picker on click<\/h3>\n
show<\/code> we will create a remove<\/code> function :<\/p>\n\r\nfunction remove(){\r\n divElement.remove()\r\n}\r\n<\/pre>\nremove<\/code> function :<\/p>\n\r\n\/\/ ---\r\n\/\/ Just after the browser has finished to load the image we can add it in the canvas\r\nimage.addEventListener('load', function () {\r\n \r\n \/\/ Display the palette\r\n show();\r\n \r\n \/\/ Handle the click on the palette \r\n canvasElement.addEventListener('click', function (event) {\r\n \/\/ Get the position of the mouse in the Canvas\r\n var x = event.pageX - this.offsetLeft;\r\n var y = event.pageY - this.offsetTop;\r\n\r\n \/\/ Get the Image Data\r\n var imageData = canvasImage.getImageData(x, y, 1, 1).data;\r\n \r\n \/\/ Convert into readable variable\r\n var Red = imageData[0];\r\n var Green = imageData[1];\r\n var Blue = imageData[2];\r\n var rgb = Red + ',' + Green + ',' + Blue;\r\n \r\n \/\/ Display the result in the console\r\n console.log(rgb);\r\n\r\n \/\/ The user has clicked a color, we can remove the picker\r\n remove(); \r\n });\r\n});\r\n\/\/ ---\r\n<\/pre>\n\r\n\/\/ ---\r\n\r\nfunction remove(){\r\n divElement.remove();\r\n \/\/ remove listener on window click\r\n window.removeEventListener('click', remove);\r\n}\r\n\r\n\/\/ Just after the browser has finished to load the image we can add it in the canvas\r\nimage.addEventListener('load', function () {\r\n \r\n \/\/ Display the palette\r\n show();\r\n \r\n \/\/ Handle the click on the palette \r\n canvasElement.addEventListener('click', function (event) {\r\n \/\/ Get the position of the mouse in the Canvas\r\n var x = event.pageX - this.offsetLeft;\r\n var y = event.pageY - this.offsetTop;\r\n\r\n \/\/ Get the Image Data\r\n var imageData = canvasImage.getImageData(x, y, 1, 1).data;\r\n \r\n \/\/ Convert into readable variable\r\n var Red = imageData[0];\r\n var Green = imageData[1];\r\n var Blue = imageData[2];\r\n var rgb = Red + ',' + Green + ',' + Blue;\r\n \r\n \/\/ Display the result in the console\r\n console.log(rgb);\r\n\r\n \/\/ The user has clicked a color, we can remove the picker\r\n remove(); \r\n });\r\n\r\n \/\/ It's a kind of cancellation a click\r\n window.addEventListener('click', remove);\r\n});\r\n\/\/ ---\r\n<\/pre>\n3.4 Callback function<\/h3>\n
\r\nfunction colorPicker(onChoose){ \/* ...*\/ }\r\n<\/pre>\n\r\n\/\/ ---\r\n\/\/ Display the result in the console\r\nonChoose(rgb);\r\n\/\/ ---\r\n<\/pre>\n
\r\nvar btn = document.getElementById('btn1');\r\nbtn.addEventListener('click', function(){\r\n colorPicker(function(color){\r\n console.log(color);\r\n });\r\n});\r\n<\/pre>\n3.5 Convert to Hexadecimal<\/h3>\n
\r\nfunction rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}\r\nfunction toHex(n) {\r\n n = parseInt(n,10);\r\n if (isNaN(n)) return "00";\r\n n = Math.max(0,Math.min(n,255));\r\n return "0123456789ABCDEF".charAt((n-n%16)\/16) + "0123456789ABCDEF".charAt(n%16);\r\n}\r\n<\/pre>\n\r\n\/\/ ---\r\n\r\n\/\/ Convert into readable variable\r\nvar Red = imageData[0];\r\nvar Green = imageData[1];\r\nvar Blue = imageData[2];\r\n\r\n\/\/ Create HEXA Value\r\nvar color = rgbToHex(Red, Green, Blue);\r\n\r\n\/\/ Call the CallBack function with the color\r\ncallback('#'+color);\r\nremove();\r\n\r\n\/\/ ---\r\n<\/pre>\n#<\/code> character to make the color usable in HTML document.<\/p><\/blockquote>\n<\/a>4. Download<\/h3>\n