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);
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);
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.
| Method | |||||
|---|---|---|---|---|---|
| createImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
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 |
Objek Kanvas