HTML canvas putImageData() metodu

HTML5 Canvas Referans Kılavuzu

tanım ve kullanım

putImageData() metodu, belirli bir ImageData nesnesinden gelen görüntü verilerini çizim tablosuna yerleştirir.

İpucu:bakınız getImageData() metodu, çizim tablosunun belirli bir köşesinin piksel verilerini kopyalayabilir.

İpucu:bakınız createImageData() metod, yeni boş ImageData nesnesi oluşturabilir.

örnek

Aşağıdaki kod, getImageData() ile çizim tablosunun belirli bir köşesinin piksel verilerini kopyalar, ardından putImageData() ile bu verileri çizim tablosuna geri yerleştirir:

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

kişisel olarak deneyin

gramer

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

parametre değerleri

parametreler tanım
imgData Kanvasa geri döndürülecek ImageData nesnesini tanımlar.
x ImageData nesnesinin sol üst köşesinin x koordinatı, pixel olarak.
y ImageData nesnesinin sol üst köşesinin y koordinatı, pixel olarak.
dirtyX Opsiyonel. Yatay değeri (x), pixel olarak, kanvasta resmin konumlandırılacağı yer.
dirtyY Opsiyonel. Yatay değeri (y), pixel olarak, kanvasta resmin konumlandırılacağı yer.
dirtyWidth Opsiyonel. Kanvasta çizilen resmin kullanılan genişliği.
dirtyHeight Opsiyonel. Kanvasta çizilen resmin kullanılan yüksekliği.

Tarayıcı Desteği

Tablo içindeki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Açıklama:Internet Explorer 8 ve daha eski sürümler <canvas> elementini desteklememektedir.

HTML5 Canvas Referans Kılavuzu