Video: Bài 2 - Pixel là gì? 2025
Với HTML5, bạn có thể trích xuất dữ liệu của một thẻ canvas vào dữ liệu pixel cơ bản. Thao tác dữ liệu này cho phép bạn kiểm soát rộng rãi hình ảnh của bạn trong thời gian thực. Bạn có thể sử dụng dữ liệu này để cân bằng màu sắc cũng như để thử nghiệm các hiệu ứng mờ, sắc nét, và hiệu ứng màu-đen của chính bạn.
Không có vấn đề gì định dạng một hình ảnh được lưu giữ trong hệ thống tập tin, nó được hiển thị như là một danh sách các điểm ảnh. Mỗi pixel được đại diện (trong hệ thống 32-bit tiêu chuẩn, dù sao) bởi bốn số nguyên: RGBA. Các R đại diện cho bao nhiêu màu đỏ là trong các dấu chấm hiện tại, G là viết tắt của màu xanh lá cây, và B là viết tắt của màu xanh lam. Chữ A là viết tắt của alpha, , là thước đo tính minh bạch của hình ảnh. Mỗi giá trị có thể thay đổi từ 0 đến 255. Khi bạn chuyển đổi một hình ảnh sang định dạng dữ liệu hình ảnh, bạn sẽ nhận được một mảng số nguyên lớn. Mỗi nhóm bốn hình ảnh đại diện cho một pixel đơn dữ liệu màu.
Mã này thay đổi cân bằng màu sắc của một hình ảnh:
function draw () {var drawing = document. getElementById ("bản vẽ"); var con = bản vẽ. getContext ("2d"); var original = tài liệu. getElementById ("bản gốc"); CANV_WIDTH = 200; CANV_HEIGHT = 200; / / vẽ ban đầu trên con vải. drawImage (bản gốc, 0, 0); // lấy dữ liệu hình ảnh imgData = con. getImageData (0, 0, 200, 200); // vòng lặp thông qua dữ liệu hình ảnh cho (hàng = 0; hàng 255) {r = 255;} if (r 255) {g = 255;} if (g 255) {r = 255;} Nếu (a> 255) {a = 255;} if (a <0) {a = 0;} // Trả về giá trị mới để dữ liệu imgData. dữ liệu [chỉ số] = r; imgData. data [index + 1] = g; imgData. dữ liệu [chỉ số + 2] = b; imgData. dữ liệu [index + 3] = a;} // end col for loop} // end row cho vòng lặp // vẽ hình ảnh mới lên canvas con. putImageData (imgData, 0, 0);} // end function
Mặc dù danh sách mã dường như khá dài, nhưng thực sự không phải là quá khó để làm theo:
-
Vẽ một hình ảnh ban đầu.
Kỹ thuật bạn sẽ sử dụng chiết xuất dữ liệu từ phần tử canvas, do đó, để sửa đổi một hình ảnh, trước tiên bạn cần vẽ nó lên một bức tranh. Bạn có thể sử dụng phương thức drawImage () thông thường.
-
Trích xuất dữ liệu hình ảnh.
Phương thức getImageData () nhận được hình ảnh được hiển thị bằng khung hiện tại và đặt nó vào một mảng lớn các số nguyên.
-
Thực hiện một vòng lặp để xử lý các hàng.
Dữ liệu hình ảnh được chia thành các hàng và cột. Mỗi hàng đi từ 0 đến chiều cao của vải, vì vậy tạo một vòng lặp lặp để lặp qua các hàng.
-
Thực hiện một vòng lặp để xử lý các cột.
Bên trong mỗi hàng là đủ dữ liệu để đi từ 0 đến chiều rộng của vải, nên làm cho một giây cho vòng lặp bên trong đầu tiên.Thông thường, sử dụng một cặp nested cho các vòng lặp để thực hiện qua dữ liệu hai chiều như thông tin hình ảnh.
-
Tìm chỉ mục trong imageData cho hàng và cột hiện tại.
Mảng imageData chứa bốn số nguyên cho mỗi pixel, vì vậy chúng ta phải làm một phép toán nhỏ để tìm ra vị trí số nguyên đầu tiên của mỗi pixel. Công thức dễ nhất là nhân số hàng bằng chiều rộng của khung vẽ, thêm vào cột số, và nhân toàn bộ kết quả cho 4.
-
Kéo các giá trị màu tương ứng từ chỉ mục.
Chỉ số cũng đại diện cho giá trị màu đỏ của pixel hiện tại. Các int tiếp theo giữ giá trị màu xanh lá cây, tiếp theo là giá trị màu xanh, và cuối cùng là giá trị alpha.
-
Thao tác các giá trị màu như bạn muốn.
Nếu bạn định làm một ứng dụng cân bằng màu, bạn chỉ cần thêm hoặc xóa các giá trị để thay đổi cân bằng màu sắc tổng thể. Bạn cũng có thể làm nhiều công việc phức tạp hơn nếu bạn muốn chơi xung quanh với thao tác hình ảnh cấp độ ảnh.
-
Kiểm tra các ranh giới.
Giá trị pixel không được thấp hơn 0 hoặc cao hơn 255, do đó kiểm tra cả hai ranh giới này và điều chỉnh tất cả các giá trị pixel nằm trong giới hạn pháp lý.
-
Trả lại các giá trị được thao tác trở lại mảng imgData.
Bạn có thể sao chép các giá trị trở lại mảng, và bạn nên làm như vậy để làm cho các thay đổi có thể nhìn thấy được.
-
Vẽ dữ liệu hình ảnh trở lại khung ảnh.
Hàm putImageData () rút ra dữ liệu hình ảnh hiện tại trở lại khung ảnh làm hình ảnh bình thường. Phiên bản mới của hình ảnh sẽ phản ánh những thay đổi.
