Metode putImageData() kanvas HTML

Panduan Referensi Canvas HTML5

Definisi dan penggunaan

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

Petunjuk:Lihat getImageData() metode, yang dapat menyalin data pixel kotak yang ditentukan di atas kanvas.

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

contoh

Kode di bawah ini menggandakan data pixel kotak yang ditentukan di atas kanvas, lalu mengembalikan data gambar 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

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

nilai parameter

parameter deskripsi
imgData Objek ImageData yang diatur untuk kembali ke kanvas.
x Koordinat x bagian kiri atas Objek ImageData, dalam satuan piksel.
y Koordinat y bagian kiri atas Objek ImageData, dalam satuan piksel.
dirtyX Pilihan. Nilai horisontal (x), dalam satuan piksel, tempat gambar ditempatkan di atas kanvas.
dirtyY Pilihan. Nilai horisontal (y), dalam satuan piksel, tempat gambar ditempatkan 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.

Dukungan Browser

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 HTML5