Latest web development tutorials

HTML canvas getImageData () metode

Pedoman kanvas Referensi HTML Pedoman kanvas Referensi HTML

contoh

The getImageData kode berikut () Salin data pixel kanvas persegi panjang yang ditunjuk, dan () data gambar kembali ke kanvas oleh 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);
}

Coba »

Dukungan Browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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:

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

mencoba

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:

red=255-old_red;
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

contoh yang lebih

gambar yang ingin Anda gunakan:

The Scream

contoh

Gunakan getImageData () untuk membalikkan warna setiap pixel dari gambar di kanvas:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
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 »

Pedoman kanvas Referensi HTML Pedoman kanvas Referensi HTML