الوصول إلى بيانات البكسل في HTML Canvas

هل من الممكن استرداد لون بكسل معين داخل كائن HTML Canvas؟ نعم، يمكنك الوصول إلى بيانات البكسل ومعالجتها في HTML Canvas باستخدام طرق مختلفة توفرها Canvas API.

الحصول على لون البكسل

لاسترداد لون البكسل في موقع محدد داخل اللوحة القماشية، يمكنك استخدام طريقة getImageData(). تقوم هذه الطريقة بإرجاع كائن ImageData الذي يمثل جزءًا من اللوحة القماشية. يحتوي كائن ImageData على مجموعة من بيانات البكسل التي يمكنك الوصول إليها باستخدام خاصية .data.

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

بمجرد حصولك على بيانات البكسل، يمكنك معالجتها عليه حسب الرغبة. على سبيل المثال، يمكنك إنشاء صورة بتدرج رمادي عن طريق تحويل كل بكسل إلى ظل رمادي:

// Get the CanvasPixelArray from the given coordinates and dimensions.
var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;

// Loop over each pixel and convert it to grayscale.
for (var i = 0, n = pix.length; i < n; i  = 4) {
  var gray = (pix[i]   pix[i 1]   pix[i 2]) / 3;
  pix[i  ] = gray;
  pix[i 1] = gray;
  pix[i 2] = gray;
}

// Draw the ImageData at the given (x,y) coordinates.
context.putImageData(imgd, x, y);

من خلال الاستفادة من أساليب getImageData() وputImageData()، يمكنك تنفيذ مهام معالجة البكسل المختلفة، مثل تصفية الصور، وتعديلات الألوان، وإنشاء تأثيرات على HTML قماش.