getImageData()
Canvas getImageData() metodi
Misol
Canvas’dagi belgilangan to‘rtburchak uchun piksel ma’lumotlaridan nusxa oling, so‘ngra rasm ma’lumotlarini canvas’ga qaytarib joylang:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
function copy() {
const imgData = ctx.getImageData(10, 10, 50, 50);
ctx.putImageData(imgData, 10, 70);
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq misollar.
Tavsif
getImageData() metodi canvas’dagi belgilangan to‘rtburchak uchun piksel ma’lumotlaridan nusxa oladigan ImageData obyektini qaytaradi.
Eslatma: ImageData obyekti rasm emas: u canvas’dagi bir qismni (to‘rtburchakni) belgilaydi va shu to‘rtburchak ichidagi har bir piksel haqidagi ma’lumotni saqlaydi.
ImageData obyektidagi har bir piksel uchun to‘rtta ma’lumot — RGBA qiymatlari mavjud:
R - qizil rang (0-255 oralig‘ida)
G - yashil rang (0-255 oralig‘ida)
B - ko‘k rang (0-255 oralig‘ida)
A - alfa kanal (0-255 oralig‘ida; 0 — shaffof, 255 — to‘liq ko‘rinadigan)
Rang/alfa ma’lumotlari massivda saqlanadi va bu massiv ImageData obyektining data xususiyatida joylashgan.
Maslahat: Massivdagi rang/alfa ma’lumotlarini o‘zgartirganingizdan so‘ng, putImageData() metodi yordamida rasm ma’lumotlarini canvas’ga qaytarib nusxalashingiz mumkin.
Misol:
Qaytarilgan ImageData obyektidagi birinchi pikselning rang/alfa ma’lumotlarini olish uchun kod:
red = imgData.data[0];
green = imgData.data[1];
blue = imgData.data[2];
alpha = imgData.data[3];
Maslahat: getImageData() metodidan canvas’dagi rasmning har bir pikseli rangini teskarisiga o‘zgartirish (invert qilish) uchun ham foydalanishingiz mumkin.
Barcha piksellarni sikl orqali aylanib chiqing va rang qiymatlarini quyidagi formula yordamida o‘zgartiring:
red = 255-old_red;
green = 255-old_green;
blue = 255-old_blue;
Quyidagi "O‘zingiz sinab ko‘ring" misoliga qarang!
Sintaksis
| context.getImageData(x, y, width, height) |
Parametr qiymatlari
| Parametr | Tavsif |
|---|---|
| x | Nusxa olinadigan hudud yuqori chap burchagining x koordinatasi (piksellarda) |
| y | Nusxa olinadigan hudud yuqori chap burchagining y koordinatasi (piksellarda) |
| width | Nusxa olinadigan to‘rtburchak hududning kengligi |
| height | Nusxa olinadigan to‘rtburchak hududning balandligi |
Qaytariladigan qiymat
| ImageData obyekti |
Ko‘proq misollar
Ishlatiladigan rasm:
Misol
Canvas’dagi rasmning har bir pikseli rangini teskarisiga o‘zgartirish uchun getImageData() dan foydalaning:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("scream");
ctx.drawImage(img, 0, 0);
const imgData = ctx.getImageData(0, 0, c.width, c.height);
// invert colors
for (let 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);
O‘zingiz sinab ko‘ring »
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standartidir (2014).
getImageData() barcha zamonaviy brauzerlarda qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | 9-11 |
❮ Canvas ma’lumotnomasi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!