Metode putImageData() kanvas HTML

Referensi Kanvas HTML

Contoh

Kode di bawah ini menyalin data piksel untuk persegi panjang tertentu di kanvas dengan getImageData(), lalu mengembalikan data gambar ke kanvas dengan putImageData():

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

function copy() {
  var imgData = ctx.getImageData(10, 10, 50, 50);
  ctx.putImageData(imgData, 10, 70);
}

Dukungan Peramban

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.

Method
putImageData() Yes 9.0 Yes Yes Yes

Definisi dan Penggunaan

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

Tip: Baca tentang metode getImageData() yang menyalin data piksel untuk persegi panjang tertentu pada kanvas.

Tips: Baca tentang metode createImageData() yang membuat objek ImageData kosong baru.


Sintaks JavaScript

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

Nilai Parameter

Parameter Description
imgData Specifies the ImageData object to put back onto the canvas
x The x-coordinate, in pixels, of the upper-left corner of the ImageData object
y The y-coordinate, in pixels, of the upper-left corner of the ImageData object
dirtyX Optional. The horizontal (x) value, in pixels, where to place the image on the canvas
dirtyY Optional. The vertical (y) value, in pixels, where to place the image on the canvas
dirtyWidth Optional. The width to use to draw the image on the canvas
dirtyHeight Optional. The height to use to draw the image on the canvas

Referensi Kanvas HTML