خاصية بيانات ImageData قماشية HTML

مثال

قم بإنشاء كائن ImageData بحجم 100 * 100 بكسل حيث يتم تعيين كل بكسل على اللون الأحمر:

اللوحة القماشية

جافا سكريبت:

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

دعم المتصفح

تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.

Property
data	Yes	9.0	Yes	Yes	Yes

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

تقوم خاصية البيانات بإرجاع كائن يحتوي على بيانات صورة لكائن ImageData المحدد.

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

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

يتم الاحتفاظ بمعلومات اللون / ألفا في مصفوفة ، ويتم تخزينها في خاصية بيانات كائن ImageData.

أمثلة:

صيغة جعل البكسل الأول في كائن 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;

نصيحة: انظر إلى createImageData () و getImageData () و putImageData () لمعرفة المزيد عن كائن ImageData.

بناء جملة JavaScript

بناء جملة JavaScript:	imageData . البيانات ؛

❮ مرجع قماش HTML