طريقة createImageData() لـ Canvas

دليل مرجعي لـ canvas

التعريف والاستخدام

createImageData() قاعدة بيانات لإنشاء عمود ImageData جديد فارغ. القيمة الافتراضية للبكسل الجديد هي الأسود الشفاف.

للمعلومات الأربعة الموجودة لكل بكسل في عمود ImageData، هناك قيم RGBA:

  • R - الأحمر (0-255)
  • G - الأخضر (0-255)
  • B - الأزرق (0-255)
  • A - قناة alpha (0-255; 0 هو شفاف، 255 هو مرئي بالكامل)

لذلك، الأسود الشفاف يمثل (0,0,0,0).

color/alpha موجودة بشكل مجموعة، وكون المجموعة تحتوي على أربعة معلومات لكل بكسل، فإن حجم المجموعة هو أربعة أضعاف حجم عمود ImageData. (هناك طريقة أكثر بسيطة للحصول على حجم المجموعة، وهي استخدام ImageDataObject.data.length)

مجموعة تحتوي على معلومات color/alpha تُخزن في عمود ImageData. data في الخاصية.

إشارة:في إتمام عملية معلومات color/alpha في المجموعة، يمكنك استخدام putImageData() يكرر هذا البرنامج النصوص على اللوحة.

مثال:

هذه القواعد تغير البكسل الأول في ImageData object إلى اللون الأحمر:

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

هذه القواعد تغير البكسل الثاني في ImageData object إلى اللون الأحمر:

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

مثال

أنشئ ImageData object مقاسه 100*100 بكسل، حيث يكون كل بكسل أحمر، ثم أضعه على اللوحة.

لم يكن متوفرًا متصفحك دعم علامة HTML5 canvas.

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

تجربة شخصية

القواعد

هناك نسختان من method createImageData():

1. أنشئ ImageData object جديد بناءً على حجم المحدد (بالبكسل):

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

2. أنشئ ImageData object جديد بنفس حجم ImageData object المحدد (بدون نسخ بيانات الصورة):

var imgData=context.createImageData(imageData);

قيمة المعلمات

المعلمات وصف
width عرض ImageData object، مقاسها بالبكسل.
height ارتفاع ImageData object، مقاسها بالبكسل.
imageData مثل ImageData object آخر.

دعم المتصفحات

الرقم في الجدول يشير إلى إصدار أولي يدعم هذه الخاصية من المتصفح.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

ملاحظة:Internet Explorer 8 وأحدث إصداراته لا يدعم عنصر <canvas>.

دليل مرجعي لـ canvas