التوصيات للدورة

دليل مرجعي لـ canvas

طريقة Canvas getImageData()

تعريف و استخدام getImageData()

يستعيد الطريقة كائن ImageData يحتوي على بيانات بكسلات دائرة معينة على اللوحة.

  • للبكسل في كائن ImageData، هناك معلومات أربعة، وهي قيم RGBA:
  • R - الأحمر (0-255)
  • G - الأخضر (0-255)
  • B - الأزرق (0-255)

A - قناة الألفا (0-255; 0 هو شفاف، 255 هو مرئي بالكامل) تخزن معلومات لون/ألفا كنوع مجموعة وتخزن في كائن 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;

يرجى الرجوع إلى المثال الموضح أدناه "تجربة شخصية".

مثال

مثال 1

هذا الكود ينسخ بيانات البكسل في منطقة معينة من اللوحة باستخدام 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);
}

جرب بنفسك

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

النحو

var imgData = context.getImageData(x,y,width,height);

قيمة المتغيرات

المتغيرات الوصف
x الإحداثيات الـ x للركن الأيسر العلوي للنسخ.
y الإحداثيات الـ y للركن الأيسر العلوي للنسخ.
width عرض المنطقة المعدة للنسخ.
height ارتفاع المنطقة المعدة للنسخ.

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

مثال 2

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

الزنبق

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

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

JavaScript:

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

جرب بنفسك

دعم المتصفح

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

ملاحظة:Internet Explorer 8 وأقدم إصداراته لا تدعم عنصر <canvas>.

دليل مرجعي لـ canvas