ساخت Color Picker با Canvas
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
افزونه فرم ساز آسان
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
خرید ورق گالوانیزه رنگی
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت
کارگاه رویه کوبی در تهران
بهترین کارگاه رویه کوبی و تعمیر مبل راحتی و استیل در تهران با قیمت و کیفیت عالی
خودتان را اینجا معرفی کنید
بهترین کارگاه رویه کوبی و تعمیر مبل راحتی و استیل در تهران با قیمت و کیفیت عالی
دمو
توجه داشته باشید که اگر میخواهید دمو را در حالت لوکال تست کنید، با مرورگری غیر از کروم تست کنید، در کروم به دلیل مسائل امنیتی این اسکریپت فقط در حالت آنلاین کار میکند.
کد 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 فعالیتش رو شروع کرد، در حال حاضر در زمینه ی برنامه نویسی تحت وب و اندروید و شبکه های ارتباطی سیسکو فعالیت میکنه .
نظرات و سوالات کاربران
با تشکر از شما
اگر لطف کنید کمکم کنید واقعا ممنون میشم
با تشکر از شما