Metode Canvas createImageData()

Panduan Referensi Canvas

Definisi dan penggunaan

createImageData() Method untuk membuat objek ImageData kosong baru. Nilai pixel standar objek baru adalah hitam transparan.

Untuk setiap pixel di dalam objek ImageData, ada empat aspek informasi, yaitu nilai RGBA:

  • R - merah (0-255)
  • G - hijau (0-255)
  • B - biru (0-255)
  • A - channel alpha (0-255; 0 adalah transparan, 255 adalah terlihat penuh)

Sebagai akibatnya, warna hitam yang transparan adalah (0,0,0,0).

Warna/alpha ada dalam bentuk array, dan sejak array mengandung empat informasi untuk setiap pixel, ukuran array adalah empat kali ukuran objek ImageData. (Ada cara yang lebih mudah untuk mendapatkan ukuran array, yaitu menggunakan ImageDataObject.data.length)

Array yang mengandung informasi warna/alpha disimpan di dalam objek ImageData, data pada properti.

Pemberitahuan:Setelah operasi selesai melaksanakan informasi warna/alpha di dalam array, Anda dapat menggunakan putImageData() Metode akan menyalin data gambar kembali ke atas kanvas.

Contoh:

Sintaks ini akan menjadikan pixel pertama 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 ini akan menjadikan pixel kedua objek ImageData menjadi merah:

imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

Contoh

Buat objek ImageData 100*100 pixel dengan setiap pixel berwarna merah, lalu tempatkannya di atas kanvas:

Peramban Anda tidak mendukung tag HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var 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);

Coba sendiri

Sintaks

Ada dua versi metode createImageData():

1. Buat objek ImageData baru dengan ukuran yang ditentukan (dalam ukuran pixel):

var imgData=context.createImageData(width,height);

2. Buat objek ImageData baru dengan ukuran yang sama seperti yang disebutkan lainnya (tidak akan menyalin data gambar):

var imgData=context.createImageData(imageData);

Nilai parameter

Parameter Deskripsi
width Lebar objek ImageData, dalam ukuran pixel.
height Tinggi objek ImageData, dalam ukuran pixel.
imageData Satu objek ImageData lainnya.

Dukungan Peramban

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Keterangan:Internet Explorer 8 dan versi sebelumnya tidak mendukung elemen <canvas>.

Panduan Referensi Canvas