روش Canvas getImageData()

کینواس مرجع دستاویز

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

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

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

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

color/alpha به صورت آرایه وجود دارد و در ImageData ذخیره می‌شود: 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 موقعیت بالای سمت چپ شروع کپی.
y موقعیت بالای سمت چپ شروع کپی.
width پعرض ناحیه مستطیلی که باید کپی شود.
height ارتفاع ناحیه مستطیلی که باید کپی شود.

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

مثال 2

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

The Tulip

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

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

جاوااسکریپت:

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);

آزمایش کنید

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

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

کروم ایج فائر فاکس سافری آپرا
کروم ایج فائر فاکس سافری آپرا
4.0 9.0 3.6 4.0 10.1

نوٹ:اینٹرنیشنل ایکسپلورر 8 اور اس سے پچھلے کی نسلیں <کینواس> عنصر کو نہیں مدد فراہم کرتی ہیں。

کینواس مرجع دستاویز