Contoh
Buat 100 * 100 piksel objek imageData di mana setiap pixel berwarna merah, dan memasukkannya ke 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); Cobalah sendiri " Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.
| metode | |||||
|---|---|---|---|---|---|
| createImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definisi dan Penggunaan
The createImageData() metode menciptakan baru, kosong objek imageData. nilai piksel obyek baru yang transparan hitam secara default.
Untuk setiap pixel dalam suatu objek imageData ada empat potongan informasi, nilai-nilai RGBA:
R - Warna merah (from 0-255)
G - Warna hijau (from 0-255)
B - Warna biru (from 0-255)
A - The alpha channel (from 0-255; 0 is transparent and 255 is fully visible)
Jadi, transparan hitam menunjukkan: (0,0,0,0) .
Informasi warna / alpha diadakan dalam array, dan karena array berisi 4 buah informasi untuk setiap pixel, ukuran array adalah 4 kali ukuran objek imageData: lebar * tinggi * 4. (Cara yang lebih mudah untuk menemukan ukuran dari array, adalah dengan menggunakan ImageDataObject.data.length)
Array yang berisi informasi warna / alpha disimpan dalam data yang properti dari objek imageData.
Tip: Setelah Anda telah memanipulasi informasi warna / alpha dalam array, Anda dapat menyalin data gambar kembali ke kanvas dengan putImageData() metode.
Examples:
Sintaks untuk membuat pixel pertama di imageData objek 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 pixel kedua di hijau imageData objek:
imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;JavaScript Sintaks
Ada dua versi dari createImageData() metode:
1. Ini menciptakan objek imageData baru dengan dimensi yang ditentukan (dalam piksel):
| sintaks JavaScript: | var imgData = context . createImageData( width,height ) ; |
|---|
2. Ini menciptakan objek imageData baru dengan dimensi yang sama sebagai objek yang ditentukan oleh anotherImageData (this does not copy the image data) :
| sintaks JavaScript: | var imgData = context . createImageData( imageData ) ; |
|---|
Nilai parameter
| Parameter | Deskripsi |
|---|---|
| width | Lebar dari objek imageData baru, dalam piksel |
| height | Ketinggian objek imageData baru, dalam piksel |
| imageData | objek anotherImageData |
<Canvas Object