Properti data ImageData kanvas HTML

Contoh

Buat objek ImageData 100*100 piksel di mana setiap piksel diatur ke warna merah:

Kanvas

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

Dukungan Peramban

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.

Property
data	Yes	9.0	Yes	Yes	Yes

Definisi dan Penggunaan

Properti data mengembalikan objek yang berisi data gambar dari objek ImageData yang ditentukan.

Untuk setiap piksel dalam objek ImageData ada empat bagian informasi, nilai RGBA:

R - Warna merah (dari 0-255)
G - Warna hijau (dari 0-255)
B - Warna biru (dari 0-255)
A - Saluran alfa (dari 0-255; 0 transparan dan 255 adalah terlihat sepenuhnya)

Informasi warna/alfa disimpan dalam larik, dan disimpan di properti data objek ImageData.

Contoh:

Sintaks untuk membuat piksel pertama dalam objek ImageData menjadi merah:

imgData=ctx.createImageData(100, 100);

imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;

Sintaks untuk membuat piksel kedua di objek ImageData menjadi hijau:

imgData = ctx.createImageData(100, 100);

imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255;

Tip: Lihat createImageData() , getImageData() , dan putImageData() untuk mempelajari lebih lanjut tentang objek ImageData.

Sintaks JavaScript

Sintaks JavaScript:	gambarData .data ;

Referensi Kanvas HTML