Metode createImageData() kanvas HTML

Contoh

Buat objek ImageData 100*100 piksel di mana setiap piksel berwarna merah, dan letakkan di 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 metode ini.

Method
createImageData()	Yes	9.0	Yes	Yes	Yes

Definisi dan Penggunaan

Metode createImageData() membuat objek ImageData baru yang kosong. Nilai piksel objek baru berwarna hitam transparan secara default.

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)

Jadi, hitam transparan menunjukkan: (0,0,0,0).

Informasi warna/alfa disimpan dalam larik, dan karena larik berisi 4 buah informasi untuk setiap piksel, ukuran larik adalah 4 kali ukuran objek ImageData: lebar*tinggi*4. (Cara yang lebih mudah untuk menemukan ukuran array, adalah dengan menggunakan ImageDataObject.data.length)

Array yang berisi informasi warna/alfa disimpan dalam properti data objek ImageData.

Tip: Setelah Anda memanipulasi informasi warna/alfa dalam larik, Anda dapat menyalin data gambar kembali ke kanvas dengan metode putImageData() .

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;

Sintaks JavaScript

Ada dua versi metode createImageData():

1. Ini membuat objek ImageData baru dengan dimensi yang ditentukan (dalam piksel):

Sintaks JavaScript:	var imgData= konteks .createImageData( lebar, tinggi );

2. Ini membuat objek ImageData baru dengan dimensi yang sama dengan objek yang ditentukan oleh anotherImageData (ini tidak menyalin data gambar):

JavaScript syntax:	var imgData=context.createImageData(imageData);

Nilai Parameter

Parameter	Description
width	The width of the new ImageData object, in pixels
height	The height of the new ImageData object, in pixels
imageData	anotherImageData object

Referensi Kanvas HTML