مثال
إنشاء 100*100 كائن ImageData بكسل حيث كل بكسل الأحمر، ووضعها على قماش:
جافا سكريبت:
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() | نعم فعلا | تسعة | نعم فعلا | نعم فعلا | نعم فعلا |
تعريف واستخدام
و createImageData() طريقة يخلق، وجوه ImageData فارغ جديد. قيم بكسل الكائن الجديد باللون الأسود الشفاف افتراضيا.
لكل بكسل في كائن ImageData هناك أربع قطع من المعلومات والقيم رغبا:
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)
يتم تخزين مجموعة يحتوي على معلومات اللون / ألفا في data خاصية الكائن 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;جافا سكريبت بناء الجملة
هناك إصداران من createImageData() الأسلوب:
1. هذا يخلق كائن ImageData جديد مع الأبعاد المحددة (بالبكسل):
| جافا سكريبت بناء الجملة: | var imgData=context.createImageData(width,height); |
|---|
2. وهذا يخلق كائن ImageData جديد مع نفس الأبعاد ككائن المحدد من قبل anotherImageData (وهذا لا نسخ بيانات الصورة):
| JavaScript syntax: | var imgData=context.createImageData(imageData); |
|---|
قيم معلمة
| معامل | وصف |
|---|---|
| width | عرض الكائن ImageData الجديد، بالبكسل |
| height | ارتفاع الكائن ImageData الجديد، بالبكسل |
| imageData | كائن anotherImageData |