طريقة getImageData() في لوحة HTML

دليل مرجعي كانفاس HTML5

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

getImageData() الطريقة تعود ImageData المعدل مرة أخرى، والذي نسخ بيانات البكسل المحددة في اللوحة.

للمسار الأول من ImageData المعدل مرة أخرى، هناك معلومات أربعة حول كل بكسل، وهي قيم RGBA:

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

اللون / الألفة موجودة كنص إعدادي، ومخزنة في ImageData المعدل مرة أخرى: data المعلمة.

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

مثال:

التعليمات التالية يمكن أن تحصل على معلومات الألوان / الألفة للمسار الأول من ImageData المعدل مرة أخرى:

red=imgData.data[0];
green=imgData.data[1];
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;

（انظر مثال "تجربة بنفسك" أدناه。）

مثال

مثال 1

يتم استخدامه في الكود التالي لنسخ بيانات البكسل في منطقة معينة من اللوحة باستخدام getImageData()، ثم وضع البيانات مرة أخرى على اللوحة باستخدام putImageData():

فار c=document.getElementById("myCanvas");
فار ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
فونكشن copy()
}
فار imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

جربها بنفسك

نصيحة:يتم تقديم أمثلة إضافية في قاعدة الصفحة.

النحو

فار imgData=context.getImageData(x,y,width,height);

قيمة المتغير

المتغيرات الوصف
x التعريف للنقطة العلوية اليسرى للمنطقة التي سيتم نسخها.
y التعريف للنقطة العلوية اليسرى للمنطقة التي سيتم نسخها.
width عرض المنطقة المتمثلة في الشريط الذي سيتم نسخه.
height ارتفاع المنطقة المتمثلة في الشريط الذي سيتم نسخه.

مزيد من الأمثلة

مثال 2

الصورة التي سيتم استخدامها:

زنبق

استخدم getImageData() لإعكس لون كل بكسل في الصورة على اللوحة.

لم يتم دعم علامة HTML5 canvas في متصفحك.

JavaScript:

فار c=document.getElementById("myCanvas");
فار ctx=c.getContext("2d");
فار img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
فار imgData=ctx.getImageData(0,0,c.width,c.height);
// إعكس الألوان
لـ (فار 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);

جربها بنفسك

دعم المتصفحات

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

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