مетод Canvas getImageData()

منوی مرجع Canvas

تعریف و استفاده

getImageData() این روش ImageData object را برمی‌گرداند که داده‌های پیکسل‌های یک مستطیل مشخص از کanvas را کپی می‌کند.

برای هر پیکسل در ImageData object، چهار نوع اطلاعات وجود دارد، به نام RGBA:

  • R - قرمز (0-255)
  • G - سبز (0-255)
  • B - آبی (0-255)
  • A - کانال آلفا (0-255; 0 شفاف است و 255 کاملن قابل مشاهده است)

color/alpha به صورت آرایه در ImageData object ذخیره شده است و در data ویژگی استفاده کنید.

توجه:پس از انجام تغییرات بر روی اطلاعات color/alpha در آرایه، می‌توانید از putImageData() این روش داده‌های تصویر را به کanvas برمی‌گرداند.

مثال:

کد زیر اطلاعات color/alpha اولین پیکسل ImageData را به شما ارائه می‌دهد:

red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

آزمایش کنید

توجه:شما همچنین می‌توانید از روش getImageData() برای تغییر رنگ هر پیکسل از روی کanvas استفاده کنید.

این فرمول را برای بررسی تمام پیکسل‌ها استفاده کنید و رنگ آن‌ها را تغییر دهید:

red=255-old_red;
green=255-old_green;
blue=255-old_blue;

لطفاً به مثال زیر با عنوان «تست شخصی» مراجعه کنید.

مثال

مثال 1

کد زیر از طریق getImageData() داده‌های پیکسل‌های مربع مشخص شده روی کانواس را کپی می‌کند و سپس از طریق putImageData() داده‌های تصویر را به کانواس برمی‌گرداند:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

آزمایش کنید

توجه:مثال‌های بیشتری در پایین صفحه ارائه شده است.

نحوه استفاده

var imgData=context.getImageData(x,y,width,height);

مقدار پارامترها

پارامترها توضیحات
x موقعیت x گوشه بالا چپ شروع کپی.
y موقعیت y گوشه بالا چپ شروع کپی.
width عرض مربع مستطیلی که باید کپی شود.
height ارتفاع مربع مستطیلی که باید کپی شود.

مثال‌های بیشتر

مثال 2

تصویری که باید استفاده شود:

The Tulip

از getImageData() برای تغییر رنگ هر پیکسل از تصویر روی کانواس استفاده کنید.

مرورگر شما از تگ HTML5 canvas پشتیبانی نمی‌کند.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// تغییر رنگ
برای (var i=0;i<imgData.data.length;i+=4)
  {
  imgData.data[i]=255-imgData.data[i];
  imgData.data[i+1]=255-imgData.data[i+1];
  imgData.data[i+2]=255-imgData.data[i+2];
  imgData.data[i+3]=255;
  }
ctx.putImageData(imgData,0,0);

آزمایش کنید

پشتیبانی مرورگر

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

نکته:نسخه‌های 8 و قبل از آن از Internet Explorer پشتیبانی از عنصر <canvas> را ندارند.

منوی مرجع Canvas