Metode putImageData() kanvas

Panduan Referensi Canvas

Definisi dan penggunaan

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

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

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

Contoh

Kode di bawah ini mengcopy data piksel kotak yang ditentukan di atas kanvas melalui getImageData(), kemudian 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

Syarat

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

Nilai parameter

Parameter Deskripsi
imgData Objek ImageData yang ditentukan untuk disetel kembali ke kanvas.
x Koordinat x kiri atas objek ImageData, dalam satuan piksel.
y Koordinat y kiri atas objek ImageData, dalam satuan piksel.
dirtyX Pilihan. Nilai horisontal (x), dalam satuan piksel, tempat menempatkan gambar di atas kanvas.
dirtyY Pilihan. Nilai horisontal (y), dalam satuan piksel, tempat menempatkan gambar di atas kanvas.
dirtyWidth Pilihan. Lebar yang digunakan untuk menggambar gambar di atas kanvas.
dirtyHeight Pilihan. Tinggi yang digunakan untuk menggambar gambar di atas kanvas.

Pembuka web

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 Canvas