ایجاد برنامه‌های بوم چیز جدیدی است، ما حتی می‌توانیم با آن بازی بسازیم، این برنامه در همه مرورگرهای اصلی، هم دسکتاپ و هم موبایل پشتیبانی می‌شود، و این باعث می‌شود که راه‌حلی کارآمدتر از استفاده از فلش باشد.

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

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

HTML

برای این مثال، HTML بسیار کم خواهد بود، تنها چیزی که ما برای کار کردن انتخابگر رنگ نیاز داریم یک عنصر بوم و مکانی برای نشان دادن رنگ انتخابی ما در فرمت‌های 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>

از آنجایی که ما از یک تصویر پس‌زمینه با پالت رنگ استفاده خواهیم کرد، بوم خود را به عرض و ارتفاع آن تصویر ساختم و مقادیر رنگ انتخاب‌شده در ورودی‌ها برای انتخاب راحت‌تر ظاهر می‌شوند.

شما همچنین باید jQuery را به خود اضافه کنید page از آنجایی که ما از برخی کدهای جی کوئری استفاده خواهیم کرد.

جاوا اسکریپت

اولین کاری که باید انجام دهیم تا انتخابگر رنگ کار کند این است که بوم و زمینه آن را بدست آوریم و برای انجام این کار تنها یک خط کد نیاز داریم، مانند زیر:

var canvas = document.getElementById('canvas_picker').getContext('2d');

اکنون که عنصر بوم و زمینه آن را بدست آورده ایم، می توانیم با تنظیم تصویر به عنوان پس زمینه بوم شروع کنیم. برای این کار باید یک شیء تصویری ایجاد کنیم و منبع آن را URL تصویر قرار دهیم. وقتی این تصویر بارگذاری شد، باید آن را در بوم بکشیم:

var img = new Image();
img.src="https://www.webdesignerdepot.com/2013/03/how-to-create-a-color-picker-with-html5-canvas/image.jpg";
$(img).load(function(){
 canvas.drawImage(img,0,0);
});

تا اینجا خیلی خوبه، درسته؟

خب، این قسمتی است که باید تعریف کنیم وقتی روی جایی از بوم کلیک می‌کنید چه اتفاقی می‌افتد، و اگر به آن فکر می‌کنید، ابتدا باید موقعیت مکان‌نمای کاربر را در بوم دریافت کنید تا ببینید کجا کلیک کرده‌اند، مانند این:

$('#canvas_picker').click(function(event){
var x = event.pageX - this.offsetLeft;
var y = event.pageY - this.offsetTop;

با این دو خط کد، می‌توانیم ببینیم کاربر کجا کلیک کرده است و کاری که انجام می‌دهیم این است که مختصات جایی را که کاربر کلیک کرده است را دریافت کرده و سپس افست بوم را از آن کم کنیم. این به ما نشان می دهد که کاربر نسبت به موقعیت بوم کجا کلیک کرده است.

گام بعدی ما دریافت مقادیر 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);
});

و اگر اکنون آن را آزمایش کنید، قبلاً یک انتخابگر رنگ کاملاً کاربردی دارید که مقدار RGB را در هر جایی که کلیک کنید بازیابی می کند، اما برای اینکه این کار کمی بهتر شود، می توانیم یک تابع از جاوا اسکریپت که مقادیر 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);
}

اکنون که این تابع را به دست آوردیم، تنها کاری که برای ارائه مقادیر HEX باید انجام دهیم این است که تابع را با مقادیر RBG خود انجام دهیم و سپس مقدار ورودی را به رنگ HEX با یک # قبل از آن و با تابعی که از قبل در جای خود قرار داده است، تنظیم کنیم. بسیار ساده است:

// 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="https://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="https://www.webdesignerdepot.com/2013/03/how-to-create-a-color-picker-with-html5-canvas/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 پیدا کرده اید؟ دوست دارید بتوانید از آن برای چه استفاده کنید؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، تصویر انتخابگر رنگ از طریق Shutterstock.