طريقة createImageData() في HTML canvas

دليل مرجعي لـ HTML5 Canvas

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

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

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

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

لذلك، الأبيض الشفاف يُمثل (0,0,0,0).

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

المجموعة التي تحتوي على معلومات اللون/الشفافية تُخزن في data الخصائص.

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

مثال:

هذا النحو يغير البكسر الأول إلى اللون الأحمر:

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

هذا النحو يغير البكسر الثاني إلى اللون الأحمر:

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 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>.

دليل مرجعي لـ HTML5 Canvas