لوحة HTML createImageData () طريقة

مثال

قم بإنشاء كائن 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);

دعم المتصفح

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

Method
createImageData()	Yes	9.0	Yes	Yes	Yes

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

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

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

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

لذلك ، يشير اللون الأسود الشفاف إلى: (0،0،0،0).

يتم الاحتفاظ بمعلومات اللون / ألفا في مصفوفة ، وبما أن المصفوفة تحتوي على 4 أجزاء من المعلومات لكل بكسل ، فإن حجم المصفوفة هو 4 أضعاف حجم كائن ImageData: العرض * الارتفاع * 4. (أسهل طريقة للعثور على حجم المصفوفة ، هي استخدام ImageDataObject.data.length)

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

نصيحة: بعد معالجة معلومات اللون / ألفا في المصفوفة ، يمكنك نسخ بيانات الصورة مرة أخرى على اللوحة القماشية باستخدام طريقة 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;

بناء جملة JavaScript

يوجد إصداران من طريقة createImageData ():

1. يؤدي هذا إلى إنشاء كائن ImageData جديد بالأبعاد المحددة (بالبكسل):

بناء جملة JavaScript:	var imgData = Context .createImageData ( العرض ، الارتفاع ) ؛

2. يؤدي هذا إلى إنشاء كائن ImageData جديد بنفس أبعاد الكائن المحدد بواسطة anotherImageData (هذا لا ينسخ بيانات الصورة):

JavaScript syntax:	var imgData=context.createImageData(imageData);

قيمه المعامل

Parameter	Description
width	The width of the new ImageData object, in pixels
height	The height of the new ImageData object, in pixels
imageData	anotherImageData object

❮ مرجع قماش HTML