Dữ liệu hình ảnh JavaScript
Để 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 Show
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. 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) 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; 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; Cú pháp JavaScriptCó 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"); function copy() { Hỗ trợ trình duyệtCá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ụngPhươ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) 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]; 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 Làm cách nào để lấy dữ liệu hình ảnh trong JavaScript?Phương thức getImageData() trả về đố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 đó.
Dữ liệu ImageData là gì?Giao diện ImageData biểu thị dữ liệu pixel cơ bản của một vùng của phần tử . Nó được tạo bằng cách sử dụng hàm tạo ImageData() hoặc phương thức tạo trên đối tượng CanvasRenderingContext2D được liên kết với canvas. createImageData() và getImageData().
Làm cách nào để sử dụng một hình ảnh trong JavaScript?Tạo phần tử hình ảnh trong JavaScript
. Sau đó, đặt URL hình ảnh thành thuộc tính src của nó. Cuối cùng, thêm phần tử image vào hệ thống phân cấp DOM bằng cách thêm nó vào phần tử body. Create an image element using the createElement() method on the document object. Then, set an image URL to its src attribute. Finally, add the image element to the DOM hierarchy by appending it to the body element.
Làm cách nào để lấy dữ liệu hình ảnh từ canvas trong JavaScript?Lấy dữ liệu hình ảnh từ canvas
. Sau đó, chúng tôi vẽ lát cắt này ba lần, định vị các lát cắt dần dần bên dưới và bên phải của lát cắt cuối cùng. use getImageData() to extract a slice of the image, starting at (10, 20) , with a width of 80 and a height of 230 . We then draw this slice three times, positioning the slices progressively below and to the right of the last slice. |