Canvas getImageData() စနစ်

Canvas လက်တွေ

အသုံးပြုခြင်း နှင့် အကျိုးသက်

getImageData() စနစ်ကြိုးစားပြီး ပြန်ရသော ImageData အားလုံး၏ ပုံပြင်အပေါ် အချုပ်အရိုက်အချုပ်တိုင်း၏ အရောင်တန်းသတင်းများကို ပြန်လည်ပို့ဆောင်ပါ。

ImageData အားလုံး၏ အရိုက်အချုပ်တိုင်းတွင် အချက်အလက်များအား အရှစ်များများစွာ တွေ့ရသည်၊ ဖြစ်သည်မှာ RGBA အချက်အလက်များဖြစ်သည်:

  • R - အစိမ်း (0-255)
  • G - အဖြူ (0-255)
  • B - အပိုင်း (0-255)
  • A - alpha ခွဲ (0-255; 0 သည် အမြင့်မရှိသည်၊ 255 သည် အမြင့်သားဖြစ်သည်)

color/alpha အချက်အလက်များ အစားအဝိုက်အသုံးပြု၍ အချက်အလက်များကို သို့မဟုတ် အချက်အလက်များကို အချက်အလက်အဖွဲ့အစား ထိန်းသိမ်းပါ。 data အခြေခံအချက်အလက်များတွင်

အကြံပေး:color/alpha အချက်အလက်များကို လုပ်ဆောင်ပြီးသည့်နောက် putImageData() ပုံစံကို ပုံပြင်အပေါ်သို့ ပြန်လည်ပို့ဆောင်ပါ。

အမှတ်အသား:

အောက်ပါအရာများကို အသုံးပြု၍ ပြန်ရသော ImageData အားလုံး၏ ပထမပုံစံ၏ color/alpha သတင်းများကို ရယူပါ:

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;

（အောက်ပါအရာများတွင် 'ကိုယ်တိုင်စစ်ဆေးကြည့်' အမျိုးအစားကို မြင်ပါ。）

အချက်အလက်

ဘာသာပြန် ကုန်းအချိန် 1

အချက်အလက် အောက်တွင် getImageData() ကို အသုံးပြု၍ အချက်အလက် ပေါ်တွင် ရှိသော အချက်အလက် ပြား ကို ပြန်လည်ကူးယူ၍ ပြန်လည်ပြသကြပါသည့် အချက်အလက် ကို ပြထားသည့် ဘာသာပြန် ကုန်းအချိန် ဖြစ်ပါသည်:

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);
}

ကိုယ်တိုင် စစ်ဆေးကြည့်ပါ

အကြံပေး:ကုံးပေါင်း အချက်အလက် အချက်အလက် ကို ပြန်လည်ပေးပြီ

အက္ခရာ

var imgData=context.getImageData(x,y,width,height);

အရည်အချင်း အမှတ်

အရည်အချင်း အင်္ဂါ
x ပြန်လည်ကူးယူမှု အရှိန် အရှေ့မှ အရှေ့မှ အရှိန် အမှတ်
y ပြန်လည်ကူးယူမှု အရှိန် အရှေ့မှ အရှေ့မှ အရှိန် အမှတ်
width ပြန်လည်ကူးယူရန် အကျယ်အဝန်း အကျယ်
height ပြန်လည်ကူးယူရန် အကျယ်အဝန်း အမြင့်

အချက်အလက် ပိုမို

ဘာသာပြန် ကုန်းအချိန် 2

အသုံးပြုရန် အချက်အလက်:

တီလီပေ

getImageData() ကို အသုံးပြု၍ အချက်အလက် ပေါ်တွင် ရှိသော အရောင် အမှုအရေး ကို ကွပ်ပြိန်းကြပါ

သင်၏ ဘာသာပြန် ကုန်းအချိန် က HTML5 ကုံးပေါင်း အချက်အလက် ကို ထောက်ပံ့ပေးခြင်း မရှိပါ

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// အမှုအရေး အနေဖြင့် အရောင် ကွပ်ပြိန်းကြပါ
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);

ကိုယ်တိုင် စစ်ဆေးကြည့်ပါ

ဘာသာပြန် ကုန်းအချိန် ထောက်ပံ့ပေး

အချက်အလက်များ က အဖွဲ့စည်း ပေါ်တွင် ထားသည့် အဖွဲ့စည်း ကို ထောက်ပံ့ပေးသော ဘာသာပြန် ကုန်းအချိန် ကို ညွှန်ပြသည်。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

ဖော်ပြချက်：Internet Explorer 8 နှင့် အရောက်ကျသော အချက်အလက် မှ <canvas> အားကစားရုပ် ကို ကူညီမပေးပါ။

Canvas လက်တွေ