مثال
رمز أدناه نسخ البيانات بيكسل للمستطيل المحددة على قماش مع getImageData() ، ومن ثم وضع بيانات الصورة مرة أخرى على قماش مع putImageData() :
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
} انها محاولة لنفسك » دعم المتصفح
الأرقام في الجدول تحدد أول نسخة مستعرض يعتمد الأسلوب بشكل كامل.
| طريقة | |||||
|---|---|---|---|---|---|
| getImageData() | نعم فعلا | تسعة | نعم فعلا | نعم فعلا | نعم فعلا |
تعريف واستخدام
و getImageData() الأسلوب بإرجاع كائن ImageData أن ينسخ البيانات بيكسل للالمستطيل المحدد على قماش.
ملاحظة: الكائن ImageData ليس صورة، وهي تحدد جزء (مستطيل) على قماش، ويحمل معلومات من كل بكسل داخل هذا المستطيل.
لكل بكسل في كائن ImageData هناك أربع قطع من المعلومات والقيم رغبا:
R - اللون الأحمر (0-255)
G - اللون الأخضر (0-255)
B - اللون الأزرق (0-255)
A - قناة ألفا (0-255، 0 شفافة و 255 مرئيا بالكامل)
ويعقد معلومات اللون / ألفا في صفيف، وتخزينها في data خاصية الكائن ImageData.
نصيحة: بعد أن كنت قد تلاعبت بالمعلومات اللون / ألفا في مجموعة، يمكنك نسخ البيانات الصورة مرة أخرى على قماش مع putImageData() الأسلوب.
مثال:
رمز للحصول على معلومات اللون / ألفا من بكسل الأول في الكائن ImageData عاد:
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
انها محاولة لنفسك » نصيحة: يمكنك أيضا استخدام getImageData() طريقة لعكس لون كل بكسل من الصورة على قماش.
حلقة من خلال كل بكسل وتغيير قيم اللون باستخدام هذه الصيغة:
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
انظر أدناه للحصول على "جرب بنفسك" مثلا!
جافا سكريبت بناء الجملة
| جافا سكريبت بناء الجملة: | context.getImageData(x,y,width,height); |
|---|
قيم معلمة
| معامل | وصف |
|---|---|
| x | س تنسيق (بالبكسل) من الزاوية العلوية اليسرى لبدء نسخة من |
| y | ذ تنسيق (بالبكسل) من الزاوية العلوية اليسرى لبدء نسخة من |
| width | العرض من مساحة مستطيلة سوف نسخ |
| height | ارتفاع مساحة مستطيلة الشكل سوف نسخ |
المزيد من الأمثلة
صورة لاستخدام:
مثال
استخدام getImageData() لعكس لون كل بكسل من الصورة على قماش:
جافا سكريبت:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// invert colors
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i]=255-imgData.data[i];
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2];
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,0,0); انها محاولة لنفسك »