معالجة البكسل في Canvas في HTML5

طريقة استخدام دالة createImageData() لمعالجة بكسلات لوحة الرسوم الـHTML5، عرض أمثلة على الإنترنت لمعالجة بكسلات لوحة الرسوم، كيفية استخدام النصوص الـHTML وخصائصها وغيرها من التفاصيل.

يمكن الوصول إلى كل بكسل من لوحة الرسوم الـHTML5. يمكنك استخدام كائن ImageData للقيام بذلك. يحتوي كائن ImageData على مصفوفة من البكسلات. من خلال الوصول إلى هذه المصفوفة، يمكنك التحكم في البكسلات. بعد إكمال عمليات التعامل مع البكسلات، يجب نسخ البكسلات إلى لوحة الرسوم لعرضها.

إنشاء Object ImageData

يتم إنشاء Object ImageData باستخدام وظيفة سياق 2D createImageData(). هذا مثال:

var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
var width = 100;
var height = 100;
var imageData = context.createImageData(width, height);

تضبط معلمات width وheight في دالة createImageData() المعلمة التي تُستخدم لتعيين عرض وارتفاع منطقة البكسل التي يمثلها Object ImageData الذي تم إنشاؤه (بأبعاد البكسل). في المثال أعلاه تم إنشاء Object ImageData يمثل منطقة بكسل بحجم 100x100 بكسل.

خصائص ImageData

يحتوي Object ImageData على ثلاث معلمات:

• width

• height

• data

المعلمتان width وheight تحتويان على عرض وارتفاع منطقة بيانات الصورة.
المعلمة data هي مجموعة من البتات تحتوي على قيم البكسل.

معالجة البكسل

　كل بكسل في مصفوفة data يحتوي على قيمة تتكون من 4 بت. الأحمر والأخضر والأزرق يمثلون قيمة واحدة، والقناة الألفا قيمة واحدة. يتم تحديد لون البكسل من خلال دمج الأحمر والأخضر والأزرق لإنشاء اللون النهائي. القناة الألفا توضح شفافية البكسل. يمكن أن تكون كل قيمة من الأحمر والأخضر والأزرق والألفا بين 0 و255.
هذا مثال على كود يحدد لون البكسل الأول وكذا قيمة القناة الألفا:

var pixelIndex = 0;
imageData.data[pixelIndex] = 255; // اللون الأحمر
imageData.data[pixelIndex + 1] = 0; // اللون الأخضر
imageData.data[pixelIndex + 2] = 0; // اللون الأزرق
imageData.data[pixelIndex + 3] = 255;

يرجى استخدام الكود التالي لقراءة قيمة البكسل:

var pixelIndex = 0;
var red = imageData.data[pixelIndex]; // اللون الأحمر
var green = imageData.data[pixelIndex + 1]; // اللون الأخضر
var blue = imageData.data[pixelIndex + 2]; // لون الأزرق
var alpha = imageData.data[pixelIndex + 3];

لتتمكن من الوصول إلى قيمة pixelIndex للصور البيانية التالية، قم بزيادة القيمة 4 (كل بكسل يتكون من 4 عناصر مثلما هو موضح أعلاه).
يمكنك حساب مؤشر الأكسس المعطى بهذه الطريقة:

　var index = 4 * (x + y * width);

في الحسابات، يتم حساب الـ x و y كنقاط الأكسس في الصور البيانية، ويتم حساب المؤشر كـ x و y من الأكسس. يتم تنظيم الأكسس في سلسلة طويلة من الأكسس، تبدأ من الأكسس الأعلى اليسرى، وتتحرك عمودياً إلى اليمين. عند الوصول إلى نهاية الخط، يستمر السلسلة من أقصى خط أسفل الأيسر، ويزداد إلى اليمين. لذا، لتقدير مؤشر الأكسس الموجود في x، تحتاج إلى ضرب y بمعدل الأكسس في كل سطر، ثم إضافة x.
هذه صورة توضح مصفوفة أكسس الصور البيانية العشرين بكسل وثمانية بكسل. في الهوامش اليمنى يتم سرد مؤشرات الأكسس في كل سطر. كما ترون، يتم تتبع المؤشرات من الزاوية العلوية اليسرى، ويزداد المؤشر من اليسرى إلى اليمين. عند الوصول إلى حافة الخط، يستمر التتبع من أقصى خط أسفل الأيسر، ويزداد إلى اليمين.

نسخ الأكسس إلى اللوحة

بعد معالجة الأكسس، يمكنك استخدام وظائف سياق الـ 2D لنسخها إلى اللوحة باستخدام putImageData(). هناك نسختان من putImageFunction(). النسخة الأولى من putImageData() تنسخ جميع الأكسس إلى اللوحة. هذا مثال:

var canvasX = 25;
var canvasY = 25;
segment.putImageData(imageData, canvasX, canvasY);

المعلمات canvasX و canvasY هي أرقام الـ x و y حيث يتم إدراج الأكسس على اللوحة.
هذه نسخة ثانية من putImageData()函数 تستطيع نسخ شريط الأكسس من الرسومات بدلاً من جميع الرسومات إلى اللوحة. هذا مثال على الشيفرة:

var canvasX = 25;
var canvasY = 25;
var sx = 0;
var sy = 0;
var sWidth = 25;
var sHeight = 25;
segment.putImageData(imageData, canvasX, canvasY, sx, sy, sWidth, sHeight);

مقاسات sx وsy (sourceX وsourceY) هي مقاسات x والزاوية العلوية اليسرى للشكل المربع، ويتم نسخها من مصفوفة البكسل.
مقاسات sWidth وsHeight (sourceWidth وsourceHeight) هي الأبعاد للشكل المربع، ويتم نسخها من مصفوفة البكسل.

استخراج البكسل من اللوحة

يمكن أيضًا التقاط شكل مربع بكسلي واحد من اللوحة إلى عنصر ImageData. يتم هذا من خلال استخدام دالة getImageData(). إليك مثال:

var x = 25;
var y = 25;
var width = 100;
var height = 100;
var imageData2 = context.getImageData(x, y, width, height);

مقاسات الـ x وy هي من الزاوية العلوية اليسرى للشكل المربع من اللوحة.
مقاسات الـ width وheight هي من الأبعاد الكاملة للشكل المربع من اللوحة.