Phương pháp HTML canvas putImageData ()
Thí dụ
Đoạn mã dưới đây sao chép dữ liệu pixel cho một hình chữ nhật được chỉ định trên canvas với getImageData (), sau đó đưa dữ liệu hình ảnh trở lại canvas với 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);
}
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phương pháp này.
| Method | |||||
|---|---|---|---|---|---|
| putImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Định nghĩa và Cách sử dụng
Phương thức putImageData () đặt dữ liệu hình ảnh (từ một đối tượng ImageData được chỉ định) trở lại canvas.
Mẹo: Đọc về phương thức getImageData () sao chép dữ liệu pixel cho một hình chữ nhật được chỉ định trên canvas.
Mẹo: Đọc về phương thức createImageData () để tạo một đối tượng ImageData mới, trống.
Cú pháp JavaScript
| Cú pháp JavaScript: | context .putImageData ( imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight ); |
|---|
Giá trị tham số
| 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 where to place the image on the canvas |
| y | The y-coordinate, in pixels, of the upper-left corner of where to place the image on the canvas |
| dirtyX | Optional. The x-coordinate, in pixels, of the upper-left corner of where to start drawing the image. Default 0 |
| dirtyY | Optional. The y-coordinate, in pixels, of the upper-left corner of where to start drawing the image. Default 0 |
| dirtyWidth | Optional. The width to use when drawing the image on the canvas. Default: the width of the extracted image |
| dirtyHeight | Optional. The height to use when drawing the image on the canvas. Default: the height of the extracted image |
❮ Đối tượng Canvas