أسلوب getImageData () قماش HTML
مثال
ينسخ الكود أدناه بيانات البكسل لمستطيل محدد على اللوحة القماشية باستخدام 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);
}
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الطريقة بالكامل.
| Method | |||||
|---|---|---|---|---|---|
| getImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
التعريف والاستخدام
تقوم طريقة getImageData () بإرجاع كائن ImageData يقوم بنسخ بيانات البكسل للمستطيل المحدد على لوحة قماشية.
ملاحظة: كائن 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;
انظر أدناه للحصول على مثال "جربها بنفسك"!
بناء جملة JavaScript
| بناء جملة JavaScript: | السياق .getImageData ( x ، y ، العرض ، الارتفاع ) ؛ |
|---|
قيمه المعامل
| Parameter | Description |
|---|---|
| x | The x coordinate (in pixels) of the upper-left corner to start copy from |
| y | The y coordinate (in pixels) of the upper-left corner to start copy from |
| width | The width of the rectangular area you will copy |
| height | The height of the rectangular area you will copy |
مزيد من الأمثلة
الصورة المراد استخدامها:
مثال
استخدم 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);
❮ كائن قماش