😖 😫 🤰 HTML5 इमेज से कलर पिकर बनाएं 🙇🏼 👲🏼 🚶🏽

इस ट्यूटोरियल में, मैं आपको दिखाता हूँ कि कैनवस का उपयोग करके HTML5 इमेज से कलर पिकर कैसे प्राप्त करें। मुख्य विचार कैनवस पर एक छवि बनाना, माउस के साथ आंदोलनों और क्लिक प्राप्त करना है।

चरण 1. एचटीएमएल

<!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>

चरण 2. सीएसएस

 *{ 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; }

चरण 3. जावास्क्रिप्ट

 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]; }); });

इसलिए, हमने यहां क्या किया है: सबसे पहले, कैनवस और वस्तुओं को हमारे कैनवास के लिए तैयार किया, और दूसरी बात, सभी आवश्यक घटनाओं के लिए इवेंट हैंडलर जोड़े। फिर, माउस को हिलाने के मामले में, हमें RGBA पिक्सेल जानकारी मिलती है। सब कुछ बहुत आसान है, है ना? नतीजतन, हमें कलर पिकर मिलता है!

जीवित उदाहरण
डाउनलोड
मूल लेख

HTML5 इमेज से कलर पिकर बनाएं

चरण 1. एचटीएमएल

चरण 2. सीएसएस

चरण 3. जावास्क्रिप्ट

More articles: