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

منوی مرجع Canvas

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

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

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

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

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

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

آرایه‌ای که شامل اطلاعات color/alpha است، در داخل شیء ImageData ذخیره شده است data ویژگی‌ها استفاده کنید.

توجه:در عملیات تکمیل اطلاعات color/alpha در آرایه، شما می‌توانید از 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 را ندارد.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (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 دیگر.

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

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

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