HTML canvas getImageData () metode
contoh
The getImageData kode berikut () Salin data pixel kanvas persegi panjang yang ditunjuk, dan () data gambar kembali ke kanvas oleh putImageData:
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);
}
Coba »
Dukungan Browser
Internet Explorer 9, dukungan Firefox, Opera, Chrome dan Safari getImageData () metode.
Catatan: 8 dan sebelumnya nternet Explorer tidak mendukung <canvas> elemen.
Definisi dan Penggunaan
Metode getImageData () mengembalikan imageData objek yang merupakan salinan data pixel persegi panjang kanvas ditentukan.
Catatan: objek imageDatatidak gambar, yang menyediakan sebagian dari kanvas (persegi panjang), dan disimpan dalam informasi persegi panjang masing-masing pixel.
ImageData objek untuk setiap pixel, ada empat bidang informasi, yaitu nilai-nilai RGBA:
R - red (0-255)
G - Hijau (0-255)
B - biru (0-255)
A - channel alpha (0-255; 0 transparan, 255 adalah sepenuhnya terlihat)
Warna / informasi alpha dalam bentuk array dan disimpan dalam imageData objek Data properti.
Tip: array lengkap informasi warna / alpha dalam operasi, Anda dapat menggunakan putImageData () metode data gambar disalin kembali ke kanvas.
contoh:
Kode berikut dapat diperoleh objek imageData dikembalikan dalam informasi warna / alpha pixel pertama:
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Tip: Anda juga dapat menggunakan metode getImageData () untuk membalikkan warna setiap pixel dari suatu gambar di kanvas.
Gunakan rumus ini melalui semua piksel, dan mengubah nilai-nilai warna:
green=255-old_green;
blue=255-old_blue;
Lihatlah berikut "mencoba" Misalnya!
sintaks JavaScript
sintaks JavaScript: | konteks .getImageData (x, y, lebar, tinggi); |
---|
Nilai parameter
参数 | 描述 |
---|---|
x | 开始复制的左上角位置的 x 坐标(以像素计)。 |
y | 开始复制的左上角位置的 y 坐标(以像素计)。 |
width | 要复制的矩形区域的宽度。 |
height | 要复制的矩形区域的高度。 |
contoh yang lebih
gambar yang ingin Anda gunakan:
contoh
Gunakan getImageData () untuk membalikkan warna setiap pixel dari gambar di kanvas:
JavaScript:
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
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);
Coba »