HTML canvas getImageData() နည်းလမ်း
ဥပမာ
အောက်ပါကုဒ်သည် getImageData() ဖြင့် ကင်းဗတ်ပေါ်တွင် သတ်မှတ်ထားသော ထောင့်မှန်စတုဂံတစ်ခုအတွက် pixel ဒေတာကို မိတ္တူကူးပြီး ပုံဒေတာကို 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);
}
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် နည်းလမ်းကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
| Method | |||||
|---|---|---|---|---|---|
| getImageData() | Yes | 9.0 | Yes | Yes | Yes |
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
getImageData() နည်းလမ်းသည် ကင်းဗတ်စ်ပေါ်တွင် သတ်မှတ်ထားသော စတုဂံအတွက် pixel ဒေတာကို ကူးယူသည့် ImageData အရာဝတ္ထုကို ပြန်ပေးသည်။
မှတ်ချက်- ImageData အရာဝတ္ထုသည် ရုပ်ပုံမဟုတ်ပါ၊ ၎င်းသည် ကင်းဗတ်စ်ပေါ်တွင် အပိုင်း (စတုဂံ) ကို သတ်မှတ်ပေးပြီး ထိုစတုဂံအတွင်းရှိ pixel တိုင်း၏ အချက်အလက်ကို သိမ်းဆည်းထားသည်။
ImageData အရာဝတ္ထုတစ်ခုရှိ pixel တစ်ခုစီအတွက် အချက်အလက် လေးပိုင်းပါရှိပြီး RGBA တန်ဖိုးများ-
R - အရောင် အနီရောင် (0-255)
G - အစိမ်းရင့်ရောင် (0-255)
B - အပြာရောင် (0-255)
A - အယ်လ်ဖာချန်နယ် (0-255; 0 မှ ပွင့်လင်းပြီး 255 သည် အပြည့်အဝမြင်နိုင်သည်)
အရောင်/အယ်လ်ဖာ အချက်အလက်ကို ခင်းကျင်းတစ်ခုတွင် သိမ်းဆည်းထားပြီး ImageData အရာဝတ္တု၏ ဒေတာ ပိုင်ဆိုင်မှုတွင် သိမ်းဆည်းထားသည်။
အကြံပြုချက်- array ရှိ အရောင်/အယ်လ်ဖာ အချက်အလက်ကို သင်ခြယ်လှယ်ပြီးပါက၊ သင်သည် putImageData() နည်းလမ်းဖြင့် ပုံဒေတာကို ကင်းဗတ်စ်ပေါ်သို့ ပြန်လည်ကူးယူနိုင်ပါသည် ။
ဥပမာ-
ပြန်ပေးထားသော ImageData အရာဝတ္ထုရှိ ပထမ pixel ၏ အရောင်/အယ်လ်ဖာ အချက်အလက်ကို ရယူရန်အတွက် ကုဒ်။
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
အကြံပြုချက်- ကင်းဗတ်စ်ရှိ ပုံတစ်ပုံ၏ pixels တိုင်း၏အရောင်ကို ပြောင်းပြန်လုပ်ရန် getImageData() နည်းလမ်းကိုလည်း သင်အသုံးပြုနိုင်ပါသည်။
ပစ်ဇယ်အားလုံးကို လှည့်ပတ်ပြီး ဤဖော်မြူလာကို အသုံးပြု၍ အရောင်တန်ဖိုးများကို ပြောင်းလဲပါ-
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
"သင်ကိုယ်တိုင်စမ်းသုံးကြည့်ပါ" ဥပမာအတွက် အောက်တွင်ကြည့်ပါ။
JavaScript Syntax
| JavaScript syntax- | ဆက်စပ်အကြောင်းအရာ .getImageData(x၊y၊width၊height ) ; |
|---|
ကန့်သတ်တန်ဖိုးများ
| 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 |
နောက်ထပ် ဥပမာများ
အသုံးပြုရန်ပုံ-
ဥပမာ
ကင်းဗတ်ပေါ်ရှိ ပုံတစ်ပုံ၏ pixels တိုင်း၏အရောင်ကို ပြောင်းပြန်လှန်ရန် getImageData() ကိုသုံးပါ-
JavaScript-
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
var i;
for (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);
❮ HTML Canvas အကိုးအကား