Để lấy dữ liệu hình ảnh cho từng pixel của vùng hình chữ nhật trên canvas, chúng ta có thể lấy đối tượng dữ liệu hình ảnh bằng phương thức getImageData[] của canvas context rồi truy cập dữ liệu pixel từ thuộc tính data. Mỗi pixel trong dữ liệu hình ảnh chứa bốn thành phần, thành phần đỏ, lục, lam và alpha. Có ba kỹ thuật phổ biến để truy cập dữ liệu pixel với đối tượng dữ liệu hình ảnh
- lặp qua tất cả các pixel bắt đầu từ góc trên cùng bên trái đến góc dưới cùng bên phải của vùng
- chọn ra dữ liệu pixel dựa trên tọa độ x, y
- lặp lại trên tất cả các pixel trong khi theo dõi tọa độ x, y cho từng pixel
Ghi chú. Phương thức getImageData[] yêu cầu hình ảnh được lưu trữ trên máy chủ web có cùng tên miền với mã thực thi nó. Nếu điều kiện này không được đáp ứng, một ngoại lệ SECURITY_ERR sẽ được đưa ra
Tạo ImageData có kích thước được chỉ định với dữ liệu được chỉ định. data[0] là thành phần Red của pixel đầu tiên [trên cùng bên trái], data[1] là thành phần Green của pixel đầu tiên, data[2] là thành phần Blue của pixel đầu tiên, data[3] là thành phần Alpha của pixel đầu tiên, data[4] là thành phần Red của pixel đầu tiên
Phương thức createImageData[] tạo một đối tượng ImageData mới, trống. Theo mặc định, các giá trị pixel của đối tượng mới có màu đen trong suốt
Đối với mỗi pixel trong một đối tượng ImageData, có bốn phần thông tin, các giá trị RGBA
R - Màu đỏ [từ 0-255]
G - Màu xanh lục [từ 0-255]
B - Màu xanh lam
A - The alpha channel [from 0-255; 0 is transparent and 255 is fully visible]
Vì vậy, màu đen trong suốt biểu thị. [0,0,0,0]
Thông tin màu/alpha được lưu giữ trong một mảng và vì mảng chứa 4 mẩu thông tin cho mỗi pixel nên kích thước của mảng gấp 4 lần kích thước của đối tượng ImageData. chiều rộng * chiều cao * 4. [Một cách dễ dàng hơn để tìm kích thước của mảng là sử dụng ImageDataObject. dữ liệu. chiều dài]
Mảng chứa thông tin màu/alpha được lưu trữ trong thuộc tính dữ liệu của đối tượng ImageData
Mẹo. Sau khi bạn đã thao tác thông tin màu/alpha trong mảng, bạn có thể sao chép dữ liệu hình ảnh trở lại canvas bằng phương thức putImageData[]
ví dụ
Cú pháp tạo pixel đầu tiên trong đối tượng ImageData thành màu đỏ
imgData=ctx. createImageData[100,100];
imgData. data[0]=255;
imgData. dữ liệu[1]=0;
imgData. dữ liệu[2]=0;
imgData. dữ liệu[3]=255;
Cú pháp tạo pixel thứ hai trong đối tượng ImageData thành màu xanh lục
imgData=ctx. createImageData[100,100];
imgData. dữ liệu[4]=0;
imgData. dữ liệu[5]=255;
imgData. dữ liệu[6]=0;
imgData. dữ liệu[7]=255;
Cú pháp JavaScript
Có hai phiên bản của phương thức createImageData[]
1. Điều này tạo ra một đối tượng ImageData mới với kích thước được chỉ định [tính bằng pixel]
cú pháp JavaScript. var imgData=bối cảnh. createImageData[chiều rộng, chiều cao];2. Thao tác này tạo đối tượng ImageData mới có cùng kích thước với đối tượng được chỉ định bởi anotherImageData [điều này không sao chép dữ liệu hình ảnh]
Mã bên dưới sao chép dữ liệu pixel cho một hình chữ nhật được chỉ định trên khung vẽ bằng getImageData[], sau đó đưa dữ liệu hình ảnh trở lại khung vẽ bằng putImageData[]
var c = tài liệu. getElementById["myCanvas"];
var ctx = c. getContext["2d"];
ctx. fillStyle = "đỏ";
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 thức
Định nghĩa và cách sử dụng
Phương thức getImageData[] trả về một đối tượng ImageData sao chép dữ liệu pixel cho hình chữ nhật đã chỉ định trên canvas
Ghi chú. Đối tượng ImageData không phải là một hình ảnh, nó chỉ định một phần [hình chữ nhật] trên canvas và chứa thông tin của mọi pixel bên trong hình chữ nhật đó
Đối với mỗi pixel trong một đối tượng ImageData, có bốn phần thông tin, các giá trị RGBA
R - Màu đỏ [từ 0-255]
G - Màu xanh lục [từ 0-255]
B - Màu xanh lam
A - The alpha channel [from 0-255; 0 is transparent and 255 is fully visible]
Thông tin màu/alpha được giữ trong một mảng và được lưu trữ trong thuộc tính dữ liệu của đối tượng ImageData
Mẹo. Sau khi bạn đã thao tác thông tin màu/alpha trong mảng, bạn có thể sao chép dữ liệu hình ảnh trở lại canvas bằng phương thức putImageData[]
Thí dụ
Mã để lấy thông tin màu/alpha của pixel đầu tiên trong đối tượng ImageData được trả về
red=imgData. data[0];
green=imgData. data[1];
blue=imgData. dữ liệu[2];
alpha=imgData. dữ liệu[3];
Mẹo. Bạn cũng có thể sử dụng phương thức getImageData[] để đảo ngược màu của từng pixel của hình ảnh trên canvas