Contoh
Kode di bawah salinan data pixel untuk persegi panjang yang ditentukan pada kanvas dengan getImageData() , dan kemudian menempatkan data gambar kembali 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);
} Cobalah sendiri " Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.
| metode | |||||
|---|---|---|---|---|---|
| putImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definisi dan Penggunaan
The putImageData() metode menempatkan data gambar (from a specified ImageData object) kembali ke kanvas.
Tip: Baca tentang getImageData() metode yang salinan data pixel untuk persegi panjang tertentu pada kanvas.
Tip: Baca tentang createImageData() metode yang menciptakan baru, kosong objek imageData.
JavaScript Sintaks
| sintaks JavaScript: | context . putImageData( imgData,x,y, dirtyX,dirtyY,dirtyWidth,dirtyHeight ) ; |
|---|
Nilai parameter
| Parameter | Deskripsi |
|---|---|
| imgData | Menentukan objek imageData untuk menempatkan kembali ke kanvas |
| x | Koordinat x, dalam piksel, dari sudut kiri atas objek imageData |
| y | Y-koordinat, dalam piksel, dari sudut kiri atas objek imageData |
| dirtyX | Pilihan. Horizontal (x) nilai, dalam pixel, di mana untuk menempatkan gambar pada kanvas |
| dirtyY | Pilihan. Vertikal (y) nilai, dalam pixel, di mana untuk menempatkan gambar pada kanvas |
| dirtyWidth | Pilihan. lebar untuk menggunakan untuk menarik gambar pada kanvas |
| dirtyHeight | Pilihan. tinggi untuk menggunakan untuk menarik gambar pada kanvas |
<Canvas Object