HTML tuval putImageData() Yöntemi

❮ HTML Kanvas Referansı

Örnek

Aşağıdaki kod, tuval üzerinde belirtilen bir dikdörtgen için piksel verilerini getImageData() ile kopyalar ve ardından görüntü verilerini putImageData() ile tuvale geri koyar:

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);
}

Tarayıcı Desteği

Tablodaki sayılar, yöntemi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Method
putImageData() Yes 9.0 Yes Yes Yes

Tanım ve Kullanım

putImageData() yöntemi, görüntü verilerini (belirli bir ImageData nesnesinden) tuvale geri koyar.

İpucu: Bir tuval üzerinde belirtilen bir dikdörtgen için piksel verilerini kopyalayan getImageData() yöntemi hakkında bilgi edinin .

İpucu: Yeni, boş bir ImageData nesnesi oluşturan createImageData() yöntemi hakkında bilgi edinin .


JavaScript Sözdizimi

JavaScript sözdizimi: bağlam .putImageData( imgData,x,y, kirliX,dirtyY,dirtyWidth,dirtyHeight );

Parametre Değerleri

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

❮ HTML Kanvas Referansı