ساخت Color Picker با Canvas

ساخت Color Picker با Canvas
ساخت اپ با canvas در حال فراگیر شدن است، با canvas حتی بازیهای مختلفی قابل ساخت است، canvas در اکثر مرورگرهای وب و موبایل پشتیبانی میشود و همین دلیلی کافی برای استفاده از آن است همچنین canvas دارد به طور کامل جای اپلیکیشن های فلش را میگیرد. در این مقاله یک Color Picker با canvas میسازیم بدون اینکه هیچ کمکی از فلش بگیریم، تنها چیزی که نیاز دارید یک ویرایشگر کد و یک مرورگر است.
آموزش SEO
مقالات آموزش SEO,فیلم آموزش SEO,کتاب های آموزش SEO رایگان و دوره آموزش SEO,
بالا آمدن در گوگل
چگونه در صفحه اول گوگل دیده شویم
ثبت شرکت و ثبت برند
ثبت شرکت و ثبت برند سریع و فوری توسط مجموعه ثبتی حقوقی نخستین ثبت 02188646492
خودتان را اینجا معرفی کنید

دمو
توجه داشته باشید که اگر میخواهید دمو را در حالت لوکال تست کنید، با مرورگری غیر از کروم تست کنید، در کروم به دلیل مسائل امنیتی این اسکریپت فقط در حالت آنلاین کار میکند.

کد HTML

در این مثال کد HTML ما بسیار کم و خلاصه میباشد، تنها چیزی که نیاز داریم یک المنت canvas میباشد و دو قسمت برای نمایش دادن رنگی که انتخاب میکنیم در دو فرمت RGB و HEX ، قطعه کد ما به صورت زیر میشود :
<canvas width="600" height="440" id="canvas_picker"></canvas>
<div id="hex">HEX: <input type="text"></input></div>
<div id="rgb">RGB: <input type="text"></input></div>
به دلیل اینکه ما از یک عکس بک گراند استفاده میکنیم، به المنت canvas عرض و ارتفاع دادیم، همچنین کتابخانه jQuery را به پروژه ی خود اضافه کنید زیرا در مرحله ی بعد با jQuery کار خواهیم کرد.

کد JAVASCRIPT

در ابتدا باید context و المنت canvas ای که در بالا تعریف کردیم را بدست آوردیم، مفهوم context به خوبی در مقاله ی ساخت نمودار انیمیشنی با Chart.js توضیح داده شده است. بنابراین قطعه کد ما به صورت زیر خواهد شد :
var canvas = document.getElementById('canvas_picker').getContext('2d');
حالا که المنت canvas و context آن را بدست آوردیم، عکس مورد نظرمان را با jQuery به عنوان بک گراند اضافه میکنیم به canvas، برای اینکار ما در خط اول یک شی از عکس میسازیم و در خط دوم source آن را عکسی که میخواهیم قرار میدهیم، در خط سوم مینویسیم زمانی که عکس لود شد، در خط چهارم عکس را درون canvas رسم کند.
var img = new Image();
img.src = 'image.jpg';
$(img).load(function(){
  canvas.drawImage(img,0,0);
});
به همین راحتی عکس مورد نظرمان درون canvas رسم میشود.
حالا در این قسمت میخواهیم بنویسیم زمانی که کاربر روی یک قسمت از عکس کلیک کرد، چه اتفاقی رخ دهد، ابتدا نیاز داریم که ببینیم کاربر در چه نقطه ی کلیک کرد، در واقع به مکان اشاره گر ماوس کاربر نیاز داریم، بنابراین مینویسیم :
$('#canvas_picker').click(function(event){
var x = event.pageX - this.offsetLeft;
var y = event.pageY - this.offsetTop;
در این قسمت دقیقا نقطه ی اشاره گر ماوس کاربر را میگیریم و از نقطه ی شروع canvas کم میکنیم تا مکانی که به دست می آوریم نسبت به مرورگر نباشد بلکه نسبت به المنت canvas ما باشد، کار بعدی این است مقدار RGB آن نقطه ای که کاربر روی آن کلیک کرده است را بدست آوریم، برای این کار از تابع getImageData استفاده میکنیم و مقدار x و y را به عنوان آرگومان ورودی قرار میدهیم :
var imgData = canvas.getImageData(x, y, 1, 1).data;
var R = imgData[0];
var G = imgData[1];
var B = imgData[2];
به همین راحتی مقادیر را درون متغیرهای R و G و B قرار میدهیم، حالا نیاز داریم که این مقادیر توسط کاربران به راحتی قابل خواندن باشد، برای نشان دادن این مقادیر به کاربر به یک متغیر rgb نیاز داریم که این سه مقدار را کنارهم با یک ویرگول نشان بدهد، بنابراین داریم :
var rgb = R + ',' + G + ',' + B;
  $('#rgb input').val(rgb);
});
همچنین به یک تابع از Javascripter نیاز داریم که مقدار RGB را به 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);
}
اکنون تنها کاری که باید انجام دهیم این است که مقدار RGB و HEX ای که دریافت کردیم را درون فیلدهای خالی که در کد HTML تعریف کردیم نشان بدهیم و همچنین قبل آن یک # بزاریم، بنابراین داریم :
// after declaring the RGB variable   
var hex = rgbToHex(R,G,B);
// after setting the RGB value
$('#hex input').val('#' + hex);
قطعه کد کامل ما به صورت زیر میشود :
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Colorpicker demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>

<canvas width="600" height="440" id="canvas_picker"></canvas>
<div id="hex">HEX: <input type="text"></input></div>
<div id="rgb">RGB: <input type="text"></input></div>

<script type="text/javascript">
    var canvas = document.getElementById('canvas_picker').getContext('2d');

    // create an image object and get it’s source
    var img = new Image();
    img.src = 'image.jpg';

    // copy the image to the canvas
    $(img).load(function(){
      canvas.drawImage(img,0,0);
    });

    // http://www.javascripter.net/faq/rgbtohex.htm
    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){
      // getting user coordinates
      var x = event.pageX - this.offsetLeft;
      var y = event.pageY - this.offsetTop;
      // getting 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);
    });
</script>

</body>
</html>

نتیجه گیری

در این اپ قدرت و سادگی استفاده از canvas را درک کردیم، اپ های خیلی پیچیده تری هم توسط canvas ساخته می شوند، همچنین بازی های متنوع و زیبایی نیز توسط canvas ساخته می شوند، سعی کنید طریقه ی استفاده از canvas را به خوبی یاد بگیرید.

محمد یه دانشجوی فناوری اطلاعات هست که از سال 92 فعالیتش رو شروع کرد، در حال حاضر در زمینه ی برنامه نویسی تحت وب و اندروید و شبکه های ارتباطی سیسکو فعالیت میکنه .

نظرات و سوالات کاربران

ارسال پاسخ mahin
mahin
جمعه ۰۲ بهمن ۱۳۹۴ ۱۱:۲۹
سلام ببخشید دوباره مزاحم میشم دیروز واستون پیام گذاشتم میشه در این رابطه بهم کمک کنید خیلی ممنونتون میشم
با تشکر از شما
ارسال پاسخ mahin
mahin
پنج شنبه ۰۱ بهمن ۱۳۹۴ ۲۰:۲۹
با عرض سلام من یه مشکل داشتم اگر بتونید کمکم کنید ممنون میشم , من میخواستم با jquery سه input بسازم یکی R یکی G و یکی B و یک باکس که باقرار دادن عدد درون INPUT رنگ مورد نظر را درون باکس به ما نشان دهد
اگر لطف کنید کمکم کنید واقعا ممنون میشم
با تشکر از شما