شروع کار مقدماتی با HTML5 Canvas (جلسه 27) : دست کاری در پیکسلهای Canvas - قسمت 1

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۳۱ اردیبهشت ۱۳۹۶

html-canvas

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

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

دریافت اطلاعات پیکسلها از زمینه Canvas:

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

var myImageData = ctx.getImageData(left, top, width, height);

این متد تمام اطلاعات پیکسلهای موجود در مستطیلی که از نقطه left و top شروع میشه و به اندازه width طول و به اندازه height ارتفاع داره رو به ما برمی گردونه. مثلا فرض کنید که یک مربع قرمز رنگ رو قرار دادیم و میخوایم اطلاعات اولین پیکسل بالا و سمت چپ اون رو بدست بیاریم. برای اینکار بصورت زیر عمل میکنیم:

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

ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

var myImageData = ctx.getImageData(50, 50, 1, 1);
console.log(myImageData.data);

میبینید که مقدار width و height رو 1 و 1 قرار دادیم، چون میخوایم فقط اطلاعات 1 پیکسل رو به ما برگردونه و اگر قصد داشته باشیم، میتونیم اطلاعات تعدادی بیشتری رو نیز بدست بیاریم. بعد از اون ویژگی data این اطلاعات رو درون Console چاپ کردیم. خروجی بصورت زیر هست:

همونطور که میبینید Uint8ClampedArray که یک نوع Typed Array که در ES6 معرفی شده است، در تصویر بالا نمایش داده شده. Typed Array‌ها برای کار کردن راحت‌تر با داده‌های باینری به وجود اومدن و میتونین از اونا استفاده کنید. همونطور که میبینید در شئ بالا که در Console چاپ شده است، ویژگی‌ها و متدهای زیادی وجود دارن ولی ما فقط با 4 مورد اول کار داریم. این اطلاعات به ترتیب مقادیر مربوط به Red و Green و Blue و Opacity پیکسل مورد نظر رو مشخص میکنن که هر کدام میتونن عددی بین 0 تا 255 باشند. چونکه پیکسلی که ما میخواستیم اطلاعات اون رو بدست بیاریم، قرمز رنگ بود و شفافیتی هم نداشت، اطلاعات بالا بدست آمدند که بصورت (255, 0, 0, 255) در اومدن. اگر بخواید اطلاعات مربوط به 40 پیکسل رو بدست بیارید، این شئ نیز بجای 4 مقدار، 160 مقدار پشت سر هم رو در اختیارتون قرار میده و 4 تا 4 تا میتونین اطلاعات مربوط به پیکسلهای پشت سر هم رو بدست بیارید. حالا یک مثال رو با هم بررسی میکنیم تا بهتر با این موضوع کنار بیاید.

تشخیص رنگ نقاط مختلف تصویر:

در این مثال میخوایم یک تصویر رو قرار بدیم و کاری کنیم که بتونیم اطلاعات نقطه ای که ماوس بر روی اون قرار میگیره رو بدست بیاریم. برای اینکار ما باید موقعیت لحظه ای ماوس رو چک کنیم و با استفاده از متد getImageData، اطلاعات مربوط به اون نقطه رو در بیاریم. در نهایت هم برای زیبایی بیشتر، رنگ مربوط به موقعیت فعلی ماوس رو به یک div دیگه در کنار تصویر نسبت میدیم. کد زیر رو در نظر بگیرید:

var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';
};
var color = document.getElementById('color');
function pick(event) {
  var x = event.layerX;
  var y = event.layerY;
  var pixel = ctx.getImageData(x, y, 1, 1);
  var data = pixel.data;
  var rgba = 'rgba(' + data[0] + ', ' + data[1] +
             ', ' + data[2] + ', ' + (data[3] / 255) + ')';
  color.style.background =  rgba;
  color.textContent = rgba;
}
canvas.addEventListener('mousemove', pick);

به همین راحتی میتونیم اطلاعات مربوط به هر نقطه ای که ماوس بر روی اون قرار میگیره رو بدست بیاریم. خروجی بصورت دموی زیر میشه.

به همین راحتی.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.