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

دستنویس کانواس HTML5

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

createImageData() روش ایجاد یک شیء ImageData خالی جدید. ارزش پیش‌فرض پیکسل‌های این شیء سیاه شفاف است.

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

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

بنابراین، سیاه شفاف (0,0,0,0) را نشان می‌دهد.

رنگ/آلفا به صورت آرایه وجود دارد و چون آرایه شامل چهار اطلاعات برای هر پیکسل است، اندازه آرایه چهار برابر اندازه ImageData است. (روش ساده‌تری برای دریافت اندازه آرایه استفاده از ImageDataObject.data.length است)

آرایه‌ای که شامل اطلاعات رنگ/آلفا است در data ویژگی‌ها استفاده کنید.

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

مثال:

این نحوه استفاده باعث تغییر رنگ اولین پیکسل ImageData به قرمز می‌شود:

imgData=ctx.createImageData(100, 100);
imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;

این نحوه استفاده باعث تغییر رنگ دومین پیکسل ImageData به قرمز می‌شود:

imgData=ctx.createImageData(100, 100);
imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255;

مثال

یک شیء ImageData با اندازه 100*100 پیکسل ایجاد کنید که هر پیکسل از آن قرمز باشد و آن را روی کانواس قرار دهید:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100, 100);
برای (var i=0; i<imgData.data.length; i+=4)
  {
  imgData.data[i+0] = 255;
  imgData.data[i+1] = 0;
  imgData.data[i+2] = 0;
  imgData.data[i+3] = 255;
  }
ctx.putImageData(imgData, 10, 10);

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

نحوه استفاده

دو نسخه از روش createImageData() وجود دارد:

1. ایجاد یک ImageData جدید با اندازه مشخص شده (به صورت پیکسل):

var imgData=context.createImageData(width,height);

2. ایجاد یک ImageData جدید با اندازه مشخص شده (بدون کپی کردن داده‌های تصویر):

var imgData=context.createImageData(imageData);

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

پارامتر توضیح
width عرض ImageData به صورت پیکسل.
height ارتفاع ImageData به صورت پیکسل.
imageData یک ImageData دیگر.

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

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

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

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

دستنویس کانواس HTML5