تخفیف ویژه

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

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

html-canvas

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

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

همونطور که دیدید در جلسه قبل از متد getImageData استفاده کردیم و اطلاعات مربوط به پیکسلهای مورد نظرمون رو بدست آوردیم. در مقابل متد putImageData هم وجود داره که میتونین اطلاعات پیکسلی مورد نظرتون رو در محل دلخواه زمینه Canvas قرار بدین. مثلا فرض کنید که من در ابتدا این تصویر رو دارم:

حالا فرض کنید که میام اطلاعات یک مربع 100 در 100 که از نقطه 50 و 50 شروع میشه رو با استفاده از getImageData دریافت میکنم و درون متغیر imageData میزارم:

var imageData = ctx.getImageData(50, 50, 100, 100);

پس حالا من اطلاعات 10 هزار پیکسل رو درون متغیر imageData دارم و میتونم اون رو هر جا که دوس داشته باشم استفاده کنم. برای اینکار میام از متد putImageData استفاده میکنم و این مربع 100 در 100 رو در نقطه 0 و 0 Canvas قرار میدم. بصورت زیر:

ctx.putImageData(imageData, 0, 0);

با اینکار خروجی تصویر بصورت زیر خواهد شد:

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

حالا یک مثال رو با هم بررسی میکنیم تا بهتر با نحوه کارکرد این دو ویژگی و قدرتی که دارن، آشنا بشید. در این مثال میخوایم یک تصویر و یک دکمه رو قرار بدیم و قصد داریم زمانی که بر روی دکمه کلیک شد، رنگ مربوط به تصویر مورد نظر Invert یا معکوس بشه. برای اینکار در ابتدا باید اطلاعات همه پیکسلها رو بدست بیاریم و اطلاعات مربوط به هر کدام رو دستکاری کنیم و بعد از اون اطلاعات دستکاری شده رو دوباره درون Canvas قرار بدیم. برای اینکار بصورت زیر عمل میکنیم. کد HTML بصورت زیر هست:

<canvas id="canvas" width="300" height="227" style="border: 1px solid #000;">
	Your browser does not support html canvas. Please update your browser and try again.
</canvas>
<br>
<button id="invertbtn">Invert</button>

همونطور که دیدید Canvas و دکمه رو قرار دادیم. حالا کدهای javascript زیر رو قرار میدیم:

var img = new Image();
img.src = 'rhino.jpg';
img.onload = function() {
  draw(this);
};

function draw(img) {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';
  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var data = imageData.data;
    
  var invert = function() {
    for (var i = 0; i < data.length; i += 4) {
      data[i]     = 255 - data[i];     // red
      data[i + 1] = 255 - data[i + 1]; // green
      data[i + 2] = 255 - data[i + 2]; // blue
    }
    ctx.putImageData(imageData, 0, 0);
  };

  var invertbtn = document.getElementById('invertbtn');
  invertbtn.addEventListener('click', invert);
}

میبینید که در خط 12 اطلاعات کل پیکسلهای Canvas رو گرفتیم و درون متغیر imageData قرار دادیم و در خط بعد ویژگی data مربوط به این شئ رو درون متغیر data ذخیره کردیم. در خط 24 و 25 به سادگی به دکمه مورد نظر دسترسی پیدا کردیم و برای اون یک رویداد تعریف کردیم که زمانی که این رویداد برای این المنت رخ بده، تابع invert باید اجرا بشه. این تابع مهمترین بخش این کد هست که بصورت زیر تعریف شده:

var invert = function() {
  for (var i = 0; i < data.length; i += 4) {
    data[i]     = 255 - data[i];     // red
    data[i + 1] = 255 - data[i + 1]; // green
    data[i + 2] = 255 - data[i + 2]; // blue
  }
  ctx.putImageData(imageData, 0, 0);
};

همونطور که میبینید در این تابع یک حلقه for قرار داده شده که 4 تا 4 تا زیاد میشه و در هر حلقه، 255 رو از مقادیر red و green و blue کم میکنیم و مقدار جدید رو بجای مقدار قبلی قرار میدیم. بعد از اینکه حلقه for همه پیکسلها رو دست کاری کرد، این مقادیر جدید پیکسلها رو با استفاده از متد putImageData درون زمینه Canvas قرار میدیم. بهمین سادگی پیکسلها رو گرفتیم، تغییرات مورد نظرمون رو اعمال کردیم و مجددا اونا رو سر جاشون قرار دادیم. با اینکار خروجی بصورت زیر میشه:لینک دمو هم در زیر قرار میدم که خودتون بتونین تست کنید:

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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