Creating a color picker from an HTML5 image
In this tutorial, I’ll show you how to get the Color Picker from an HTML5 image using Canvas. The main idea is to draw the image on the Canvas, get the movements and mouse clicks.
')
So, what have we done here: first we prepared the Canvas and objects for our canvas, and second, we added event handlers to all the necessary events. Then, in the case of moving the mouse, we get RGBA pixel information. Everything is pretty easy, isn't it? As a result, we get the Color Picker!
Living example
Download
Original article
Step 1. HTML
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title> HTML5</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div class="container"> <div class="column1"> <canvas id="panel" width="500" height="333"></canvas> </div> <div class="column2"> <div><input type="button" value=" " id="swImage" /></div> <div>:</div> <div id="preview"></div> <div>:</div> <div>R: <input type="text" id="rVal" /></div> <div>G: <input type="text" id="gVal" /></div> <div>B: <input type="text" id="bVal" /></div> <div>RGB: <input type="text" id="rgbVal" /></div> <div>RGBA: <input type="text" id="rgbaVal" /></div> <div>HEX: <input type="text" id="hexVal" /></div> <hr /> </div> <div style="clear:both;"></div> </div> <footer> <h2> HTML5</h2> </footer> </body> </html> Step 2. CSS
*{ margin:0; padding:0; } body { background-color:#bababa; color:#fff; font:14px/1.3 Arial,sans-serif; } footer { background-color:#212121; bottom:0; box-shadow: 0 -1px 2px #111111; display:block; height:70px; left:0; position:fixed; width:100%; z-index:100; } footer h2{ font-size:22px; font-weight:normal; left:50%; margin-left:-400px; padding:22px 0; position:absolute; width:540px; } footer a.stuts,a.stuts:visited{ border:none; text-decoration:none; color:#fcfcfc; font-size:14px; left:50%; line-height:31px; margin:23px 0 0 110px; position:absolute; top:0; } footer .stuts span { font-size:22px; font-weight:bold; margin-left:5px; } .container { color:#000; margin:20px auto; position:relative; width:730px; } .column1 { float:left; width:500px; } .column2 { float:left; padding-left:20px; width:170px; } #panel { border:1px #000 solid; box-shadow:4px 6px 6px #444444; cursor:crosshair; } .column2 > div { margin-bottom:10px; } #swImage { border:1px #000 solid; box-shadow:2px 3px 3px #444444; cursor:pointer; height:25px; line-height:25px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } #swImage:hover { margin-left:2px; } #preview { border:1px #000 solid; box-shadow:2px 3px 3px #444444; height:80px; width:80px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } .column2 input[type=text] { float:right; width:110px; } Step 3. JavaScript
')
var canvas; var ctx; var images = [ // 'images/pic1.jpg', 'images/pic2.jpg', 'images/pic3.jpg', 'images/pic4.jpg', 'images/pic5.jpg', 'images/pic6.jpg', 'images/pic7.jpg', 'images/pic8.jpg', 'images/pic9.jpg', 'images/pic10.jpg' ]; var iActiveImage = 0; $(function(){ // var image = new Image(); image.onload = function () { ctx.drawImage(image, 0, 0, image.width, image.height); // } image.src = images[iActiveImage]; // canvas = document.getElementById('panel'); ctx = canvas.getContext('2d'); $('#panel').mousemove(function(e) { // var canvasOffset = $(canvas).offset(); var canvasX = Math.floor(e.pageX - canvasOffset.left); var canvasY = Math.floor(e.pageY - canvasOffset.top); var imageData = ctx.getImageData(canvasX, canvasY, 1, 1); var pixel = imageData.data; var pixelColor = "rgba("+pixel[0]+", "+pixel[1]+", "+pixel[2]+", "+pixel[3]+")"; $('#preview').css('backgroundColor', pixelColor); }); $('#panel').click(function(e) { // var canvasOffset = $(canvas).offset(); var canvasX = Math.floor(e.pageX - canvasOffset.left); var canvasY = Math.floor(e.pageY - canvasOffset.top); var imageData = ctx.getImageData(canvasX, canvasY, 1, 1); var pixel = imageData.data; $('#rVal').val(pixel[0]); $('#gVal').val(pixel[1]); $('#bVal').val(pixel[2]); $('#rgbVal').val(pixel[0]+','+pixel[1]+','+pixel[2]); $('#rgbaVal').val(pixel[0]+','+pixel[1]+','+pixel[2]+','+pixel[3]); var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0]; $('#hexVal').val( '#' + dColor.toString(16) ); }); $('#swImage').click(function(e) { // iActiveImage++; if (iActiveImage >= 10) iActiveImage = 0; image.src = images[iActiveImage]; }); }); So, what have we done here: first we prepared the Canvas and objects for our canvas, and second, we added event handlers to all the necessary events. Then, in the case of moving the mouse, we get RGBA pixel information. Everything is pretty easy, isn't it? As a result, we get the Color Picker!
Living example
Download
Original article
Source: https://habr.com/ru/post/130004/
All Articles