Metode putImageData() Kanvas

Panduan Referensi Canvas

Definisi dan penggunaan

putImageData() Metode menempatkan data gambar kembali ke kanvas dari objek ImageData yang ditentukan.

Petunjuk:Lihat pula getImageData() Metode yang dapat menyalin data piksel persegi panjang yang ditentukan di atas kanvas.

Petunjuk:Lihat pula createImageData() Metode yang dapat membuat objek ImageData yang kosong baru.

Contoh

Kode di bawah ini merekam data piksel persegi panjang yang ditentukan di atas kanvas menggunakan getImageData(), lalu menempatkan data gambar kembali ke kanvas melalui putImageData():

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

Coba sendiri

Sintaks

konteks.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

Nilai parameter

Parameter Deskripsi
imgData Objek ImageData yang ditetapkan untuk dipulangkan ke kanvas.
x Koordinat x kiri atas objek ImageData, dalam piksel.
y Koordinat y kiri atas objek ImageData, dalam piksel.
dirtyX Pilihan. Nilai horizontal (x), dalam piksel, tempat menempatkan imej di atas kanvas.
dirtyY Pilihan. Nilai horizontal (y), dalam piksel, tempat menempatkan imej di atas kanvas.
dirtyWidth Pilihan. Lebar yang digunakan untuk menggambar imej di atas kanvas.
dirtyHeight Pilihan. Tinggi yang digunakan untuk menggambar imej di atas kanvas.

Pemungutan bacaan

Angka dalam tabel menunjukkan versi paling awal penggunaan browser yang mendukung sifat 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