tutorial pengembangan web terbaru
 

HTML canvas createImageData() Method

<Canvas Object

Contoh

Buat 100 * 100 piksel objek imageData di mana setiap pixel berwarna merah, dan memasukkannya ke kanvas:

YourbrowserdoesnotsupporttheHTML5canvastag.

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