HTML canvas getImageData() method

คู่มือ HTML5 Canvas

Definition and Usage

getImageData() Ang paraan ay ibibigay ang ImageData object, na kopyahan ang datos ng pixels ng tinukoy na loob ng kanvas.

Para sa bawat pixel sa ImageData object, mayroong apat na impormasyon, ibig sabihin, RGBA na halaga:

  • R - pulang (0-255)
  • G - berde (0-255)
  • B - asul (0-255)
  • A - alpha channel (0-255; 0 ay mapupuksa, 255 ay lubos na nakikita)

Ang color/alpha ay nasa anyo ng array at naimbak sa ImageData object na data property.

Paalala:Pagkatapos ng paggamit ng color/alpha sa array, maaari mong gamitin ang putImageData() Ang paraan ay kopyahin ang mga datos ng imahe sa kanvas.

Halimbawa:

Ang mga sumusunod na kodigo ay maaaring makakuha ng impormasyon ng color/alpha ng unang pixel ng ibinabalik na ImageData object:

red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

ทดลองด้วยตัวเอง

Paalala:Maaari rin mong gamitin ang getImageData() method upang pinupanan ang kulay ng bawat pixel ng imaheng nasa kanvas.

Gamitin ang formula na ito upang magpasukat ng lahat ng pixel at baguhin ang halaga ng kanilang kulay:

red=255-old_red;
green=255-old_green;
blue=255-old_blue;

(Panghaharapin ang pagsubok sa ibaba ng pahina.)

Mga katulad na paggamit

Mga katulad na paggamit 1

Ang sumusunod na kodigo ay gumagamit ng getImageData() upang kopyahin ang pixel data ng tinukoy na rectangular na lugar ng kanvas, at pagkatapos ay ilalagay ang datos ng imaheng ibalik sa kanvas sa pamamagitan ng 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);
}

ทดลองด้วยตัวเอง

Paalala:Mga dagdag na paggamit ay naibibigay sa pababa ng pahina.

Mga Tagubilin

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

Halaga ng Parametro

Parametro Paglalarawan
x Ang x-coordinate ng left upper corner na gustong kopyahin.
y Ang y-coordinate ng left upper corner na gustong kopyahin.
width Ang lapad ng rectangular na lugar na gustong kopyahin.
height Ang taas ng rectangular na lugar na gustong kopyahin.

Mga dagdag na paggamit

Mga katulad na paggamit 2

Ginagamit na imaheng:

The Tulip

Gamitin ang getImageData() upang pinupanan ang kulay ng bawat pixel ng imaheng nasa kanvas.

Ang iyong browser ay hindi sumusuporta sa tag ng HTML5 canvas.

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);
// Pinupanan ng kulay
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> อีเลเมนต์

คู่มือ HTML5 Canvas