مетод getImageData() کانواس HTML

دستورالعمل‌های کانواس HTML5

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

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

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

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

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

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

مثال:

مطالب زیر کد برای دریافت اطلاعات رنگ/آلفا اولین پیکسل ImageData برگردانده شده است:

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

به طور مستقیم امتحان کنید

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

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

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 را ندارد.

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);
// تغییر رنگ
برای (مثال 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);

به طور مستقیم امتحان کنید

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

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

کروم ایdge فایرفاکس سافاری اپرا
کروم ایdge فایرفاکس سافاری اپرا
4.0 9.0 3.6 4.0 10.1

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

دستورالعمل‌های کانواس HTML5