Metode HTML canvas createImageData()

Panduan referensi HTML5 Canvas

Definisi dan penggunaan

createImageData() Method untuk membuat objek ImageData kosong baru. Nilai pixel default objek baru adalah hitam transparen.

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

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

Jadi, warna hitam transparen diwakili (0,0,0,0).

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

Array yang berisi informasi warna/alpha disimpan di dalam properti data properti.

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

Contoh:

Sintaks ini akan menjadikan pixel pertama ImageData objek 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 ImageData objek 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 piksel 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

Sintaksis

Terdapat dua versi metode createImageData():

1. Buat objek ImageData baru dengan ukuran yang disebutkan (dalam satuan piksel):

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

2. Buat objek ImageData baru dengan ukuran yang disebutkan (tanpa menyalin data gambar):

var imgData=context.createImageData(imageData);

Nilai parameter

Parameter Deskripsi
width Lebar objek ImageData, dalam satuan piksel.
height Ketinggian objek ImageData, dalam satuan piksel.
imageData Objek ImageData lainnya.

Dukungan browser

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 HTML5 Canvas