HTML canvas ImageData ဒေတာ ပိုင်ဆိုင်မှု

ဥပမာ

ပစ်ဇယ်တိုင်းကို အနီရောင်အဖြစ် သတ်မှတ်ထားသည့် 100*100 pixels ImageData အရာဝတ္ထုကို ဖန်တီးပါ-

ကင်းဗတ်

JavaScript-

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(100, 100);
var i;
for (i = 0; i < imgData.data.length; i += 4) {
imgData.data[i + 0] = 255;
imgData.data[i + 1] = 0;
imgData.data[i + 2] = 0;
imgData.data[i + 3] = 255;
}
ctx.putImageData(imgData, 10, 10);

Browser ပံ့ပိုးမှု

ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။

Property
data	Yes	9.0	Yes	Yes	Yes

အဓိပ္ပါယ်နှင့် အသုံးပြုမှု

ဒေတာပိုင်ဆိုင်မှုသည် သတ်မှတ်ထားသော ImageData အရာဝတ္တု၏ ပုံဒေတာပါရှိသော အရာတစ်ခုကို ပြန်ပေးသည်။

ImageData အရာဝတ္ထုတစ်ခုရှိ pixel တစ်ခုစီအတွက် အချက်အလက် လေးပိုင်းပါရှိပြီး RGBA တန်ဖိုးများ-

R - အရောင် အနီရောင် (0-255)
G - အစိမ်းရင့်ရောင် (0-255)
B - အပြာရောင် (0-255)
A - အယ်လ်ဖာချန်နယ် (0-255; 0 မှ ပွင့်လင်းပြီး 255 သည် အပြည့်အဝမြင်နိုင်သည်)

အရောင်/အယ်လ်ဖာ အချက်အလက်ကို ခင်းကျင်းတစ်ခုတွင် သိမ်းဆည်းထားပြီး ImageData အရာဝတ္တု၏ ဒေတာပိုင်ဆိုင်မှုတွင် သိမ်းဆည်းထားသည်။

ဥပမာများ-

ImageData အရာဝတ္တုတွင် ပထမဆုံး pixel ကို အနီရောင်ဖြစ်စေရန်အတွက် syntax သည်-

imgData=ctx.createImageData(100, 100);

imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;

ImageData အရာဝတ္တုရှိ ဒုတိယ pixel ကို အစိမ်းရောင်ဖြစ်အောင် ပြုလုပ်ရန် အထားအသို-

imgData = ctx.createImageData(100, 100);

imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255;

အကြံပြုချက်- ImageData အရာဝတ္ထုအကြောင်း ပိုမိုလေ့လာရန် createImageData( ) ၊ getImageData() နှင့် putImageData() ကို ကြည့်ပါ။

JavaScript Syntax

JavaScript syntax-	imageData .data;

❮ HTML Canvas အကိုးအကား