Výber farby (color picker) z obrázka v HTML5 Canvas

Vytváranie Canvas aplikácií je jedna z nových vecí, ktorá si postupne hľadá svoje miesto u vývojárov webových aplikácií, ktorí by sa radi „odosobnili“ od action scriptu vo Flashi. Pomocou Canvas môžeme vytvárať aj online hry, je to podporovaný vo všetkých hlavných prehliadačoch (v desktopových aj mobilných) a vytvára nové riešenia ako pri použití Flash. V tomto príklade použijeme Canvas element na vytvorenie jednoduchého výberu farby (color picker), ktorý nevyžaduje žiadny Flash všetko, čo budeme potrebovať je textový editor a prehliadač. HTML Color Picker Pre tento príklad bude HTML veľmi jednoduché všetko čo potrebujeme, aby nám výber farby fungoval korektne je Canvas element, nejaké miesto (text input), v ktorom budeme zobrazovať vybranú farbu v RGB a v HEX a miesto, kde výslednú farbu zobrazíme: <canvas width="640" height="274" id="canvas_picker"></canvas> <div id="hex">HEX: <input type="text"></input></div> <div id="rgb">RGB: <input type="text"></input></div> <div class="divColor">Farba: <div id="showColor"></div></div> Vzhľadom na to, že použijem obrázok na pozadí ako paletu farieb – prispôsobil som šírku a výšku „plátna“ (canvas) tomuto obrázku a hodnoty pre vybranú farbu sa objavia v INPUT. Do web stránky ešte vložíme jQuery, pretože budeme používať niektoré veci z jQuery kódu. JavaScript Color Picker Prvá vec, ktorú musíme urobiť je dostať do Canvas jeho obsah: a na to nám bude stačiť jeden riadok kódu: var canvas = document.getElementById('canvas_picker').getContext('2d'); Teraz, keď sme vytvorili Canvas element a jeho obsah, môžeme začať s nastavením obrázku ako pozadie „plátna“. K tomu je potrebné vytvoriť obrazový objekt a priradiť mu zdrojové URL obrázka. Keď tento obrázok načítaný musíme ho vykresliť do Canvas: var img = new Image(); img.src = 'image.jpg'; $(img).load(function(){ canvas.drawImage(img,0,0); }); Nasleduje časť, kedy musíme definovať, čo sa stane po kliknutí niekam na „plátno“ t.j. najskôr musíme získať pozíciu kurzora v canvas elemente po kliknutí užívateľa: $('#canvas_picker').click(function(event){ var x = event.pageX - this.offsetLeft; var y = event.pageY – this.offsetTop; ... }); Naším ďalším krokom je získať RGB hodnoty z miesta, kde používateľ klikol použijeme funkciu getImageData a priradíme polohu súradníc X a Y pri kliknutí: var imgData = canvas.getImageData(x, y, 1, 1).data; var R = imgData[0]; var G = imgData[1]; var B = imgData[2]; Teraz máme tieto hodnoty uložené v R, G a B premenných a potrebujeme tieto informácie zobraziť používateľovi spôsobom, aby ich bolo možné ľahko prečítať. Musíme teda vytvoriť premennú RGB, ktorá drží tieto tri hodnoty oddelené čiarkami a potom ich zobraziť ako hodnotu v jednom z našich vstupných polí INPUT: var rgb = R + ',' + G + ',' + B; $('#rgb input').val(rgb); Ak si v tejto fáze vyskúšate náš script – zistíte, že máte plne funkčný výber farby, ktorý načíta hodnoty RGB kdekoľvek kliknete do plátna canvas. Aby sme to ešte mierne vylepšili – pridáme funkciu Javascripter, ktorá prevádza hodnoty RGB na HEX: function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)} function toHex(n) { n = parseInt(n,10); if (isNaN(n)) return "00"; n = Math.max(0,Math.min(n,255));return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16); } Následne už len zobrazíme HEX hodnoty farieb a pridáme im na začiatok mriežku „#“ a do DIV showColor priradíme vybrané pozadie : // after declaring the RGB variable var hex = rgbToHex(R,G,B); // after setting the RGB value $('#hex input').val('#' + hex); $('#showColor').css( "background-color", "#" + hex ); Celý HTML kód ako vytvoriť výber farby (color picker) z obrázka v HTML5 je nasledovný: <!DOCTYPE html> <html lang="sk"> <head> <meta charset="utf-8" /> <meta name="robots" content="noindex, nofollow"> <title>Výber farby - Colorpicker</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> </head> <body> <style> html, body { margin:0; padding: 0; background: #333; color: #fff; } .container { padding-top: 30px; margin: auto; text-align: center; font-family: Arial, Helvetica, Sans-Serif; } canvas { padding: 0 0 20px 0; } canvas:hover { cursor: crosshair; } .divColor { padding: 10px; } #showColor { width: 50px; height: 50px; background: #000; margin: auto; } </style> <div class="container"> <h1>Výber farby: Color Picker</h1> <canvas width="640" height="274" id="canvas_picker"></canvas> <div id="hex">HEX: <input type="text"></input></div> <div id="rgb">RGB: <input type="text"></input></div> <div class="divColor">Farba: <div id="showColor"></div></div> <script type="text/javascript"> var canvas = document.getElementById('canvas_picker').getContext('2d'); var img = new Image(); img.src = 'colorpicker.png'; $(img).load(function(){ canvas.drawImage(img,0,0); }); function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)} function toHex(n) { n = parseInt(n,10); if (isNaN(n)) return "00"; n = Math.max(0,Math.min(n,255)); return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16); } $('#canvas_picker').click(function(event){ // user coordinates var x = event.pageX - this.offsetLeft; var y = event.pageY - this.offsetTop; // image data and RGB values var img_data = canvas.getImageData(x, y, 1, 1).data; var R = img_data[0]; var G = img_data[1]; var B = img_data[2]; var rgb = R + ',' + G + ',' + B; // convert RGB to HEX var hex = rgbToHex(R,G,B); // making the color the value of the input $('#rgb input').val(rgb); $('#hex input').val('#' + hex); $('#showColor').css( "background-color", "#" + hex ); }); </script> </div> </body> </html> Prípadne si môžete pozrieť demo Color Picker priamo v prehliadači.

Web: AYRIS
Aktualizované: 20.3.2023

prejsť na článok

Výber farby (color picker) z obrázka v HTML5 Canvas

Transaction Colors Enhance Clarity in the Transaction List

Schmincke AERO COLOR a zľava 10%

Workflow Design A Comprehensive Guide to Efficient Process Visualization and Management

KREATÍVNE POTREBY

Markup: HTML Tags and Formatting