HTML Canvas là một phần tử rất linh hoạt có thể được sử dụng để vẽ, hoạt ảnh và thao tác hình ảnh. Trong bài viết này, chúng tôi sẽ xây dựng một công cụ trong trình duyệt mà bạn có thể sử dụng để thêm hình mờ vào hình ảnh. Chúng tôi sẽ sử dụng vanilla JavaScript và Bootstrap để tạo kiểu Show Chúng tôi sẽ đề cập đến một số kiến thức cơ bản về HTML Canvas, như vẽ, định vị và cả lưu hình ảnh. Nếu bạn chưa quen với API Canvas, đây sẽ là một hướng dẫn hay để bắt đầu Những gì chúng ta sẽ xây dựngGiao diện người dùng rất đơn giản. Chúng tôi có hai tệp đầu vào để tải lên hình ảnh cơ sở (hình ảnh chúng tôi sẽ tạo hình mờ) và một tệp khác cho hình ảnh sẽ được đặt trên hình ảnh đầu tiên của chúng tôi. Chúng tôi cũng có các tùy chọn để thay đổi kích thước hình ảnh, thay đổi vị trí và độ trong suốt của hình mờ. Trông đơn giản đúng không. Hãy bắt đầu mã hóa Tạo một dự án mới Chúng tôi sẽ sử dụng Vite cho việc này, nhưng một tệp HTML và Javascript đơn giản cũng sẽ làm được. Nếu bạn không muốn thiết lập máy chủ phát triển, bạn có thể bỏ qua bước này. Tôi thích làm việc với máy chủ dành cho nhà phát triển hơn, để được hưởng lợi từ các tính năng thú vị như tải lại nóng Để tạo một dự án mới, chỉ cần chạy $ yarn create viteNó sẽ nhắc bạn điền tên dự án và khung. Bạn nên chọn vani, chúng tôi sẽ chỉ sử dụng JavaScript đơn giản Khi điều này được thực hiện, chúng ta có thể khởi động máy chủ dev của mình bằng cách sử dụng $ yarn devGiao diện webChúng ta sẽ bắt đầu với trang HTML. Nếu bạn làm theo bước trước, tệp $ yarn dev2 đã tồn tại ở thư mục gốc của thư mục dự ánĐiều đầu tiên chúng ta cần làm là thêm các kiểu Bootstrap vào tệp HTML của mình. Truy cập trang chủ Bootstrap và trong phần cài đặt, bạn sẽ tìm thấy đoạn mã cho các tệp CSS. Chúng tôi cần thêm cái này vào thẻ đầu của chúng tôi Bây giờ chúng ta có thể thêm phần thân của HTML, sử dụng các thành phần khác nhau từ Bootstrap. Nếu bạn muốn tìm hiểu thêm, bạn có thể xem Tài liệu Phần JavaScript…Chúng tôi sẽ đặt tất cả mã JavaScript của mình vào một tệp có tên $ yarn dev3. Chúng tôi sẽ bắt đầu bằng cách tạo các chức năng nhỏ sẽ thực hiện các tác vụ cụ thể và chúng tôi sẽ kết hợp tất cả chúng lại với nhau ở phần cuốiĐọc hình ảnh địa phươngChúng tôi sẽ xác định một hàm $ yarn dev4 sẽ đọc tệp đã chọn từ đầu vào, tạo một phiên bản $ yarn dev5 mới và gọi một hàm gọi lại khi tải xong hình ảnhĐiều chỉnh kích thước hình ảnhChúng tôi có một tùy chọn trong giao diện người dùng để điều chỉnh kích thước của hình ảnh. Chúng tôi cũng có một hộp kiểm để chuyển đổi giữa việc duy trì tỷ lệ khung hình trong quá trình thay đổi kích thước. Vì vậy, làm thế nào để chúng tôi thực hiện điều đó?
Chúng tôi sẽ xác định ba chức năng
Bây giờ chúng ta đã xác định các chức năng này, chúng ta có thể thêm hai phương thức khác để thay đổi chiều rộng và chiều cao của hình ảnh Hai chức năng có các tham số tương tự. Đối số $ yarn dev9 sẽ lấy một $ yarn dev5, có thuộc tính $ yarn dev1 và $ yarn dev2. Nếu giá trị của $ yarn dev3 là đúng, thì hình ảnh cũng phải chia tỷ lệ dựa trên tỷ lệ khung hình. Vì vậy, chúng tôi sẽ sử dụng các hàm mà chúng tôi đã xác định trước đó để tìm kích thước phù hợp dựa trên giá trị tỷ lệ khung hìnhĐịnh vị hình ảnh thủy ấnĐể định vị một hình ảnh trên canvas, trước tiên chúng ta cần hiểu cách tọa độ canvas hoạt động. Không giống như hệ tọa độ Descartes mà chúng ta quen dùng trong toán học, điểm gốc (0,0) trong tọa độ HTML Canvas nằm ở góc trên bên trái. Trục x dương kéo dài sang phải và trục y dương, hướng xuống dưới. Vì vậy, vẽ một hình ảnh trên canvas yêu cầu đặt tọa độ x và y trong đó góc trên cùng bên trái của hình ảnh sẽ được đặt Hãy ghi nhớ điểm này, nếu chúng ta biết kích thước của hình mờ và canvas, chúng ta sẽ tính các giá trị tọa độ cho các vị trí khác nhau. Đây là một sơ đồ sẽ làm cho nó rõ ràng hơn một chút Vì vậy, các giá trị tọa độ được tô màu vàng sẽ là những giá trị chúng ta cần để vẽ hình ảnh thủy vân ở các vị trí đó. Được rồi, hãy viết một hàm sẽ thực hiện công việc Hãy để hình mờCho đến bây giờ chúng tôi chưa viết bất kỳ mã nào tương tác với API Canvas. Bây giờ, hãy bắt tay vào viết chức năng sẽ thực hiện việc tạo hình mờ cho chúng ta Điều đầu tiên chúng tôi làm là lấy ngữ cảnh kết xuất 2D từ khung vẽ. Điều này cho phép chúng tôi vẽ hình ảnh của chúng tôi. Sau đó, chúng tôi đặt chiều rộng và chiều cao của canvas thành cùng kích thước với hình ảnh cơ sở của chúng tôi. Chúng tôi cũng đang sử dụng phương pháp $ yarn dev4 để luôn vẽ trên khung rõ ràng mỗi khi hàm được gọiTiếp theo, chúng tôi gọi $ yarn dev5 để vẽ hình ảnh cơ sở của chúng tôi vào canvas. Sau đó, trước khi chúng tôi vẽ hình ảnh thủy ấn của mình lên khung vẽ, chúng tôi đặt giá trị $ yarn dev6 mới để thêm độ trong suốt cho hình ảnh. Chúng tôi cũng đang sử dụng phương pháp $ yarn dev7 ở đây để lấy tọa độ x và y cho hình ảnh thủy vân dựa trên vị trí chúng tôi muốnLưu hình ảnhĐể lưu hình ảnh, trước tiên chúng tôi lấy dữ liệu hình ảnh từ khung vẽ rồi tạo một liên kết rồi nhấp vào liên kết đó theo chương trình. Để lấy dữ liệu hình ảnh, chúng tôi gọi phương thức $ yarn dev8 trên canvasMột số chức năng tiện íchPhương thức $ yarn dev9 sẽ cập nhật giá trị đầu vào chiều rộng và chiều cao trên DOM dựa trên kích thước hình ảnh hiện tạiPhương thức $ yarn dev20 trả về một giá trị boolean dựa trên trạng thái hiện tại của hộp kiểmMang tất cả lại với nhauVì vậy, chúng tôi đã hoàn thành việc xác định tất cả các phương thức chúng tôi cần, bước tiếp theo sẽ là gọi chúng dựa trên tương tác của người dùng Trước tiên, hãy lấy tham chiếu đến tất cả các phần tử chúng ta cần từ DOM và lưu trữ chúng dưới dạng biến Chúng ta cũng cần khởi tạo một số biến để lưu trữ hình ảnh và tỷ lệ khung hình ban đầu của chúng Tiếp theo, chúng ta cần lắng nghe các sự kiện đầu vào mới trên các thành phần đầu vào của tệp và cập nhật các biến tỷ lệ khung hình và hình ảnh của chúng ta. Chúng tôi sử dụng hàm $ yarn dev4 mà chúng tôi đã viết trước đó tại đây để lấy dữ liệu hình ảnh từ sự kiện đầu vào. Chúng tôi cũng cần cập nhật các giá trị chiều rộng và chiều cao trong DOM, vì vậy chúng tôi sẽ sử dụng hàm $ yarn dev9 tại đâyBây giờ chúng tôi thêm trình xử lý sự kiện vào đầu vào chiều cao và chiều rộng để thay đổi kích thước hình ảnh. Ở đây chúng ta sẽ sử dụng phương pháp $ yarn dev23 và $ yarn dev24 để điều chỉnh kích thước của hình ảnhCuối cùng, chúng tôi sẽ thêm trình xử lý sự kiện nhấp chuột vào hình mờ và các nút lưu Chúng ta xong rồiNếu bạn muốn xem mã nguồn, nó có sẵn trên Github. Hy vọng bạn thích bài viết này. Cảm ơn bạn đã đọc Thêm nội dung tại PlainEnglish. io. Đăng ký nhận bản tin miễn phí hàng tuần của chúng tôi. Theo dõi chúng tôi trên Twitter và LinkedIn. Tham gia cộng đồng của chúng tôi |
