مетод HTML canvas getImageData()

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

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

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

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

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

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

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

مثال:

معلومات رنگ/الافتراضی اولین پیکسل 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 موقعیت x بالا سمت چپ شروع کپی.
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);
// رنگ وارون
برای (دو تا وارiable 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 و نسخه‌های قدیمی‌تر از عنصر <canvas> پشتیبانی نمی‌کنند.

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