HTML canvas createImageData() နည်းလမ်း

ဥပမာ

ပစ်ဇယ်တိုင်းသည် အနီရောင်ရှိသော 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 ပံ့ပိုးမှု

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

Method
createImageData()	Yes	9.0	Yes	Yes	Yes

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

createImageData() နည်းလမ်းသည် အသစ်၊ အလွတ် ImageData အရာဝတ္ထုကို ဖန်တီးပေးသည်။ အရာဝတ္ထုအသစ်၏ ပစ်ဇယ်တန်ဖိုးများသည် ပုံမှန်အားဖြင့် အနက်ရောင် ဖောက်ထွင်းမြင်ရသည်။

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

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

ထို့ကြောင့် အနက်ရောင်သည် (0,0,0,0) ကိုဖော်ပြသည်။

အရောင်/အယ်လ်ဖာ အချက်အလက်ကို ခင်းကျင်းတစ်ခုတွင် သိမ်းဆည်းထားပြီး၊ အခင်းအကျင်းတွင် pixel တစ်ခုစီအတွက် အချက်အလက် 4 ခုပါရှိသောကြောင့်၊ အခင်းအကျင်း၏ အရွယ်အစားသည် ImageData အရာဝတ္ထု၏ အရွယ်အစား- အကျယ်* အမြင့်*4 ထက် 4 ဆ ရှိသည်။ (Array ၏အရွယ်အစားကိုရှာဖွေရန်ပိုမိုလွယ်ကူသောနည်းလမ်းမှာ ImageDataObject.data.length ကိုအသုံးပြုရန်ဖြစ်သည်)

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

အကြံပြုချက်- array ရှိ အရောင်/အယ်လ်ဖာ အချက်အလက်ကို သင်ခြယ်လှယ်ပြီးပါက၊ သင်သည် putImageData() နည်းလမ်းဖြင့် ပုံဒေတာကို ကင်းဗတ်စ်ပေါ်သို့ ပြန်လည်ကူးယူနိုင်ပါသည် ။

ဥပမာများ-

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;

JavaScript Syntax

createImageData() method ၏ ဗားရှင်းနှစ်မျိုးရှိသည်။

1. ၎င်းသည် သတ်မှတ်ထားသောအတိုင်းအတာများ ( pixels ဖြင့်) ImageData အရာဝတ္ထုအသစ်ကို ဖန်တီးသည်-

JavaScript syntax-	var imgData= ဆက်စပ်မှု .createImageData( အကျယ်၊ အမြင့် );

2. ၎င်းသည် အခြားသောImageData မှ သတ်မှတ်ထားသည့် အရာဝတ္ထုကဲ့သို့ အတိုင်းအတာတူသော ImageData အရာဝတ္ထုအသစ်ကို ဖန်တီးပေးသည် (၎င်းသည် ပုံဒေတာကို ကူးယူထားခြင်းမဟုတ်ပါ)။

JavaScript syntax:	var imgData=context.createImageData(imageData);

ကန့်သတ်တန်ဖိုးများ

Parameter	Description
width	The width of the new ImageData object, in pixels
height	The height of the new ImageData object, in pixels
imageData	anotherImageData object

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