Bối cảnh và vấn đề nghiên cứu
Trong kỷ nguyên số hóa, hình ảnh kỹ thuật số đóng vai trò thiết yếu trong hoạt động truyền thông, công việc văn phòng và phát triển phần mềm. Sự đa dạng về mục đích sử dụng dẫn đến sự tồn tại của nhiều định dạng tệp hình ảnh khác nhau như JPEG, PNG, WEBP, GIF, TIFF, BMP. Mỗi định dạng sở hữu các đặc tính kỹ thuật riêng biệt về thuật toán nén, khả năng hiển thị độ trong suốt hay dung lượng lưu trữ. Người dùng thường xuyên có nhu cầu chuyển đổi qua lại giữa các định dạng để đáp ứng các tiêu chuẩn kỹ thuật cụ thể.
Qua khảo sát thực tế của nhóm tác giả, các nền tảng chuyển đổi hình ảnh trực tuyến phổ biến hiện nay (như Convertio, Onlineconvertfree, Online converter) đáp ứng tốt về tốc độ xử lý và sự tiện lợi cơ bản. Tuy nhiên, các công cụ này tồn tại hạn chế: thiếu tích hợp các tính năng chỉnh sửa hình ảnh chuyên sâu trước/sau khi chuyển đổi hoặc chưa kiểm soát chặt chẽ chất lượng đầu ra theo nhu cầu người dùng.
Để giải quyết vấn đề trên, đề tài "Xây dựng ứng dụng web chuyển đổi định dạng hình ảnh trực tuyến" được nhóm sinh viên Khoa Công nghệ Thông tin - Trường Đại học Phenikaa thực hiện, đề xuất xây dựng ứng dụng web có tên gọi ConvertTool.
Mục tiêu và nhiệm vụ nghiên cứu của đề tài bao gồm:
- Phân tích các yêu cầu chức năng, phi chức năng và các ràng buộc hệ thống (kỹ thuật, kinh tế, đạo đức).
- Thiết kế kiến trúc phần mềm, mô hình hóa các trường hợp sử dụng (Use Case), xây dựng biểu đồ tuần tự (Sequence Diagram) và biểu đồ phân lớp (Class Diagram).
- Xây dựng và triển khai ứng dụng web ConvertTool hỗ trợ chuyển đổi định dạng kết hợp bộ công cụ chỉnh sửa ảnh (cắt, chỉnh kích thước, xoay, lật, đổi tên, xóa phông nền, chỉnh màu sắc, thêm hiệu ứng).
- Kiểm thử chức năng, đánh giá hiệu năng xử lý, khả năng xử lý ngoại lệ và triển khai trên môi trường web thực tế.
Đối tượng và phạm vi nghiên cứu:
- Đối tượng nghiên cứu: Quy trình xử lý, chuyển đổi định dạng và biến đổi dữ liệu hình ảnh trên nền tảng web.
- Phạm vi không gian và thời gian: Đồ án cơ sở (mã nhóm G2-TTCS) được hoàn thành vào ngày 10/11/2023 tại Khoa Công nghệ Thông tin, Trường Đại học Phenikaa dưới sự hướng dẫn của TS. Trần Hùng.
Cơ sở lý thuyết và phương pháp
Đồ án ứng dụng các nguyên lý công nghệ phần mềm và kiến trúc hệ thống để xây dựng giải pháp:
- Mô hình kiến trúc: Ứng dụng mô hình kiến trúc MVC (Model - View - Controller) nhằm tách biệt logic xử lý dữ liệu, giao diện người dùng và điều khiển luồng:
- View: Xây dựng bằng ngôn ngữ đánh dấu HTML, định kiểu CSS và ngôn ngữ kịch bản JavaScript phía máy khách (Client-side).
- Model & Controller: Xử lý thông qua môi trường thực thi Node.js (JavaScript runtime) phía máy chủ (Server-side).
- Trừu tượng hóa cốt lõi (Key Abstraction): Đối tượng
Image (hình ảnh tải lên từ người dùng) là trung tâm của hệ thống, gắn liền với hai cơ chế phân tích chính:
- Persistency (Tính bền vững): Cơ chế lưu trữ và xử lý tệp tạm thời.
- Security (Tính an toàn/Bảo mật): Đảm bảo an toàn dữ liệu, chống rò rỉ và không khai thác hình ảnh của người dùng trái phép.
- Phương pháp phân tích & thiết kế: Sử dụng ngôn ngữ mô hình hóa hợp nhất (UML) để đặc tả Use Case, thiết kế biểu đồ tương tác tác nhân, biểu đồ tuần tự cho từng tác vụ và biểu đồ phân lớp chức năng.
- Phương pháp kiểm thử: Kiểm thử hộp đen thực nghiệm trên các tập dữ liệu ảnh mẫu (PNG, WEBP) nhằm đánh giá tính chính xác của các thuật toán xử lý hình ảnh, thời gian xử lý và khả năng bắt lỗi ngoại lệ của hệ thống.
Thiết kế và triển khai hệ thống
1. Phân tích yêu cầu và các ràng buộc hệ thống
Hệ thống được thiết kế dựa trên các nhóm yêu cầu và ràng buộc cụ thể:
- Yêu cầu chức năng: Cho phép chọn và tải tệp tin ảnh từ thiết bị; lựa chọn định dạng đầu ra (JPEG, PNG, GIF, TIFF, BMP, WEBP,...); thiết lập thông số chất lượng; thực hiện chuyển đổi; tải xuống tệp tin đã xử lý; xử lý và thông báo lỗi.
- Ràng buộc triển khai: Tương thích trên đa trình duyệt (Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge); có khả năng mở rộng (Scalability) để xử lý lượng tải lớn; đảm bảo an toàn bảo mật dữ liệu tải lên.
- Ràng buộc kinh tế: Tối ưu hóa chi phí phát triển (nhân sự, công cụ, thời gian) và chi phí vận hành/duy trì (máy chủ lưu trữ, bảo mật, cập nhật).
- Ràng buộc đạo đức và quyền riêng tư: Tuân thủ quy định bảo vệ quyền riêng tư người dùng, không sử dụng dữ liệu hình ảnh cho mục đích khác ngoài phạm vi xử lý của ứng dụng.
2. Đặc tả các kịch bản Use Case và luồng sự kiện
Hệ thống ConvertTool tích hợp 11 trường hợp sử dụng chính với luồng sự kiện được chuẩn hóa:
| STT |
Tên Use Case |
Mô tả & Tham số đầu vào |
Tiền điều kiện & Hậu điều kiện |
Xử lý ngoại lệ |
| 1 |
Chuyển đổi định dạng |
Chọn định dạng đích, chọn mức chất lượng (Quality). Bấm Convert. |
Tiền: Tải ảnh lên form, có kết nối Internet.
Hậu: Nhận ảnh định dạng mới. |
Báo lỗi nếu tệp không hợp lệ hoặc bấm tải xuống trước khi xử lý xong. |
| 2 |
Thay đổi kích cỡ (Size) |
Nhập thông số chiều ngang (Width), chiều dọc (Height) hoặc tỷ lệ (Scale). |
Tiền: Có ảnh trong form.
Hậu: Ảnh được co giãn kích thước. |
Nếu để trống hoặc nhập sai định dạng số, hệ thống giữ nguyên kích thước gốc. |
| 3 |
Biến đổi (Transform) |
Nhập góc xoay (Rotate), tùy chọn lật ảnh (Flip). |
Tiền: Có ảnh trong form.
Hậu: Ảnh được xoay/lật theo yêu cầu. |
Nhập sai góc xoay sẽ giữ nguyên trạng thái gốc. |
| 4 |
Cắt xén (Trim) |
Nhập Width, Height, tọa độ cắt PositionX, PositionY. |
Tiền: Có ảnh trong form.
Hậu: Ảnh được cắt theo khung chỉ định. |
Bỏ trống hoặc nhập sai thông số, hệ thống giữ nguyên hình ảnh ban đầu. |
| 5 |
Đổi tên (Rename) |
Nhập tên tệp mới vào ô cấu hình. |
Tiền: Có ảnh trong form.
Hậu: Tệp đầu ra mang tên mới. |
Bỏ trống hoặc nhập ký tự lỗi, giữ nguyên tên gốc của tệp. |
| 6 |
Xóa phông nền (Remove BG) |
Kích hoạt chức năng tách nền trên menu. |
Tiền: Có ảnh trong form.
Hậu: Ảnh được tách nền trong suốt. |
Không thực thi đối với các định dạng ảnh không tương thích thuật toán tách nền. |
| 7 |
Chỉnh màu (Color) |
Thiết lập Brightness (mặc định 1), Contrast (mặc định 1), Opacity (mặc định 1), Greyscale, Invert, Blur. |
Tiền: Có ảnh trong form.
Hậu: Màu sắc/độ sáng/độ mờ được áp dụng. |
Bỏ trống hoặc nhập sai thông số, giữ nguyên giá trị mặc định. |
| 8 |
Hiệu ứng (Effect) |
Chọn hiệu ứng Sepia hoặc nhập thông số Poster size. |
Tiền: Có ảnh trong form.
Hậu: Bộ lọc hiệu ứng được áp dụng lên ảnh. |
Không nhập hoặc nhập sai sẽ giữ nguyên ảnh gốc. |
| 9 |
Chuyển đổi kết hợp |
Kết hợp đồng thời nhiều tùy chỉnh (Size, Transform, Effect, Color, Trim,...) cùng lúc. |
Tiền: Có ảnh trong form.
Hậu: Xuất ảnh tổng hợp đầy đủ chỉnh sửa. |
Báo lỗi chi tiết nếu có trường dữ liệu không hợp lệ hoặc tải xuống sớm. |
| 10 |
Đổi giao diện (Theme) |
Chọn chủ đề giao diện qua nút cài đặt hình bánh răng. |
Tiền: Có kết nối Internet.
Hậu: Giao diện chuyển đổi tức thì. |
Không có luồng ngoại lệ. |
| 11 |
Đổi ngôn ngữ |
Chọn ngôn ngữ hiển thị qua menu cài đặt. |
Tiền: Có kết nối Internet.
Hậu: Ngôn ngữ trang web được cập nhật. |
Không có luồng ngoại lệ. |
3. Thiết kế mô hình hóa và Giao diện
- Mô hình hóa biểu đồ: Báo cáo xây dựng hệ thống 12 biểu đồ tuần tự mô tả chi tiết tương tác giữa tác nhân người dùng, giao diện Web (View), bộ điều khiển Controller và tầng xử lý dữ liệu Model cho từng tác vụ riêng lẻ cũng như toàn bộ quy trình tổng hợp.
- Biểu đồ phân lớp: Bao gồm phân lớp quản lý các chức năng chuyển đổi/chỉnh sửa hình ảnh và phân lớp điều khiển giao diện (Theme Controller).
- Giao diện người dùng: Giao diện được thiết kế tương thích hiển thị (Responsive Design) trên cả máy tính xách tay và điện thoại thông minh. Hệ thống cung cấp các khối thông báo trạng thái tải lên, xử lý thành công và trang điều hướng lỗi chuyên biệt (trang thông báo lỗi có nút chuyển hướng Go to Home).
- Môi trường triển khai: Ứng dụng được triển khai thử nghiệm thực tế tại địa chỉ:
https://covert-image.com/.
Nội dung chính theo từng chương
Phần 1: Đặt vấn đề và Giải pháp đề xuất
Phần mở đầu phân tích bối cảnh phát triển của các công nghệ hình ảnh số, chỉ ra nhu cầu chuyển đổi định dạng và các nhược điểm của các công cụ trực tuyến hiện nay. Từ đó, nhóm tác giả xác định mục tiêu và đề xuất giải pháp phát triển ứng dụng ConvertTool kết hợp hai nhóm tính năng: chuyển đổi định dạng và bộ công cụ chỉnh sửa hình ảnh trực tuyến.
Phần 2: Thiết kế và triển khai
Đây là nội dung trọng tâm của đồ án, tập trung vào:
- Định nghĩa chi tiết các yêu cầu chức năng (5 chức năng chính) và các ràng buộc phi chức năng (triển khai, kinh tế, đạo đức).
- Đặc tả chi tiết 11 use case với các luồng sự kiện chuẩn, luồng ngoại lệ, tiền điều kiện và hậu điều kiện.
- Phân tích kiến trúc hệ thống MVC, vai trò của HTML/CSS/JavaScript và nền tảng Node.js.
- Trình bày hệ thống biểu đồ tuần tự (12 biểu đồ), biểu đồ phân lớp và hình ảnh giao diện thực tế của ứng dụng trên các nền tảng thiết bị.
- Thực nghiệm kiểm thử chức năng và kiểm thử khả năng xử lý lỗi.
Phần 3: Một số thành phần khác của đồ án
Trình bày về phương pháp quản lý dự án và các khía cạnh bổ trợ:
- Kế hoạch dự án: Xây dựng biểu đồ Gantt và bảng phân công công việc chi tiết theo 3 mốc tiến độ (Milestone I, II, III).
- Đảm bảo làm việc nhóm: Quy trình họp định kỳ (thứ 6 hoặc chủ nhật hàng tuần) có sự tham gia của giảng viên hướng dẫn, quy trình trao đổi qua Zalo và các kênh làm việc trực tuyến/trực tiếp.
- Đạo đức nghề nghiệp và trách nhiệm xã hội: Cam kết bảo mật quyền riêng tư của người dùng, giải quyết xung đột nội bộ chuyên nghiệp.
- Chiến lược tiếp thu kiến thức mới: Kế hoạch 1 tuần học JavaScript cơ bản và giai đoạn nghiên cứu chuyên sâu Node.js thông qua các nền tảng học liệu (FreeCodeCamp, W3Schools, YouTube) kết hợp công cụ AI (ChatGPT, Bing Chat, Leo, Bard).
Kết quả và đóng góp
1. Kết quả kiểm thử thực nghiệm
Đồ án đã thực hiện kiểm thử thực tế trên hệ thống và ghi nhận kết quả cụ thể:
| Kịch bản kiểm thử |
Dữ liệu đầu vào & Thiết lập thông số |
Kết quả ghi nhận |
Thời gian xử lý |
| Kiểm thử chuyển đổi định dạng |
Tệp gốc định dạng PNG, chuyển đổi sang WEBP, thiết lập mức chất lượng (Quality): 100%. |
Chuyển đổi thành công, ảnh giữ chất lượng hiển thị tốt, tệp WEBP mở được trên trình duyệt. |
Nhanh chóng (tức thì) |
| Kiểm thử bộ công cụ chỉnh sửa 1 |
Tệp PNG; chỉnh kích thước Width: 400, Height: 200, Scale: 1; biến đổi Rotate: 30°C, Flip: NO; đổi tên tệp từ tiger thành a_little_tiger; áp dụng hiệu ứng Sepia. |
Hình ảnh xuất ra đáp ứng chính xác toàn bộ các thông số kích thước, góc xoay, tên tệp và hiệu ứng lọc màu. |
Khoảng 1 giây |
| Kiểm thử bộ công cụ chỉnh sửa 2 |
Tệp ảnh gốc; cắt xén Trim (Width: 300, Height: 100, PositionX: 20, PositionY: 40); bật tính năng Xóa phông nền (Remove Background); chỉnh Brightness: 1.0. |
Hình ảnh được cắt đúng tọa độ, tách phông nền thành công và áp dụng đúng độ sáng. |
Khoảng 1 giây |
| Kiểm thử xử lý lỗi & ngoại lệ |
- Trường hợp 1: Nhấn Convert khi chưa tải ảnh.
- Trường hợp 2: Nhấn Download khi chưa xử lý hoặc chưa thêm dữ liệu. |
Hệ thống bắt lỗi chính xác, hiển thị thông báo lỗi và chuyển hướng an toàn về trang chủ qua nút Go to Home. |
Tức thì |
2. Đóng góp của đề tài
- Xây dựng thành công một giải pháp công nghệ tích hợp "2 trong 1": vừa chuyển đổi định dạng ảnh đa dạng vừa cung cấp bộ công cụ tùy biến hình ảnh toàn diện trên nền tảng web.
- Đảm bảo tính khả dụng cao với giao diện trực quan, tương thích đa thiết bị (máy tính và điện thoại) và hỗ trợ đa ngôn ngữ, tùy biến theme.
- Đóng góp mô hình tổ chức phân công công việc và quản lý tiến độ rõ ràng giữa các thành viên sinh viên trong một đồ án cơ sở ngành CNTT:
| Thành viên |
Vai trò |
Trọng tâm phụ trách |
Tỷ lệ đóng góp |
| Hoàng Văn Phú |
Phụ trách thiết kế |
Thiết kế giao diện (70%), Kiểm thử chương trình (60%), Phân tích dự án (30%). |
35% |
| Đỗ Đăng Hoàn |
Hỗ trợ xây dựng |
Xây dựng chức năng chuyển đổi (85%), Quản lý dữ liệu (50%), Viết báo cáo (35%). |
34% |
| Nguyễn Thế Toại |
Trưởng nhóm |
Slide thuyết trình (100%), Viết báo cáo (50%), Nghiên cứu & Tài liệu (40%), Quản lý dữ liệu (50%). |
31% |
Hạn chế và hướng nghiên cứu tiếp
- Hạn chế được ghi nhận:
- Chức năng xóa phông nền tự động (
Remove background) gặp hạn chế khi xử lý một số định dạng hình ảnh đặc thù hoặc cấu trúc tệp lạ.
- Quá trình giao tiếp nhóm trong giai đoạn đầu đôi khi mất nhiều thời gian do khâu chuẩn bị thông tin chưa hoàn toàn đồng bộ.
- Hướng phát triển tiếp theo:
- Nâng cấp thuật toán xử lý để hỗ trợ xóa phông và xử lý chuyên sâu trên nhiều định dạng tệp mở rộng.
- Tối ưu hóa hiệu năng máy chủ Node.js và nâng cao khả năng mở rộng hệ thống khi lượng người dùng đồng thời tăng cao.
Giá trị tham khảo
Tài liệu đồ án cơ sở này mang lại giá trị tham khảo hữu ích cho:
- Sinh viên ngành Công nghệ Thông tin, Kỹ thuật Phần mềm: Cung cấp tài liệu mẫu hoàn chỉnh về quy trình phân tích và thiết kế hệ thống theo mô hình MVC, cách xây dựng các biểu đồ UML (Use Case, Sequence, Class Diagrams) cho một ứng dụng xử lý đa phương tiện.
- Lập trình viên phát triển web: Cung cấp tài liệu tham khảo về các kịch bản kiểm thử biên tập hình ảnh (cắt, đổi kích thước, xoay, chỉnh sắc độ màu, tách nền) sử dụng Node.js và JavaScript.
- Phương pháp quản lý dự án sinh viên: Cung cấp phương pháp phân chia công việc theo Milestone, cách lập bảng đóng góp theo tỷ lệ phần trăm và chiến lược tự học công nghệ mới thông qua tài liệu mở và trợ lý AI.
Câu hỏi thường gặp
1. Ứng dụng ConvertTool sử dụng kiến trúc và công nghệ nền tảng nào?
ConvertTool được xây dựng trên mô hình kiến trúc MVC (Model - View - Controller). Phần giao diện (View) được phát triển bằng HTML, CSS kết hợp JavaScript. Phần xử lý logic nghiệp vụ và dữ liệu (Model & Controller) được xây dựng trên nền tảng môi trường thực thi Node.js.
2. Điểm khác biệt chính giữa ConvertTool và các trang web chuyển đổi hiện nay như Convertio là gì?
Các công cụ trực tuyến hiện nay chủ yếu tập trung vào tính năng chuyển đổi thuần túy mà thiếu các công cụ chỉnh sửa tích hợp. ConvertTool kết hợp khả năng chuyển đổi định dạng với bộ công cụ biên tập hình ảnh toàn diện (cắt, đổi kích thước, biến đổi xoay/lật, xóa phông nền, chỉnh màu sắc, độ sáng, hiệu ứng) trong cùng một giao diện xử lý.
3. Hệ thống xử lý như thế nào khi người dùng nhập sai thông số hoặc bỏ trống các trường chỉnh sửa?
Đối với các chức năng như thay đổi kích thước (Size), biến đổi (Transform), cắt (Trim), đổi tên (Rename), màu sắc (Color) hay hiệu ứng (Effect), nếu người dùng kích hoạt chức năng nhưng bỏ trống trường dữ liệu hoặc nhập giá trị không hợp lệ, hệ thống sẽ tự động bắt ngoại lệ và giữ nguyên định dạng/thông số gốc của hình ảnh.
4. Kết quả kiểm thử thời gian thực thi của hệ thống đạt mức bao nhiêu?
Trong các bài kiểm thử thực nghiệm với tổ hợp nhiều chức năng chỉnh sửa đồng thời (như thay đổi kích thước, xoay 30 độ, đổi tên, thêm hiệu ứng Sepia hoặc cắt ảnh kết hợp xóa phông nền và chỉnh độ sáng), hệ thống hoàn thành xử lý và xuất kết quả trong thời gian xấp xỉ 1 giây.
5. Tỷ lệ phân chia khối lượng công việc giữa các thành viên thực hiện đồ án như thế nào?
Dự án được phân bổ cân bằng giữa 3 thành viên: sinh viên Hoàng Văn Phú đóng góp 35% (phụ trách chính thiết kế giao diện và kiểm thử), sinh viên Đỗ Đăng Hoàn đóng góp 34% (phụ trách chính xây dựng chức năng chuyển đổi), và sinh viên Nguyễn Thế Toại đóng góp 31% (trưởng nhóm, phụ trách tài liệu, quản lý dữ liệu, slide và báo cáo).
Kết luận
Đồ án cơ sở "Xây dựng ứng dụng web chuyển đổi định dạng hình ảnh trực tuyến" của nhóm sinh viên Trường Đại học Phenikaa đã hoàn thành việc phân tích, thiết kế và triển khai thành công hệ thống ConvertTool dựa trên kiến trúc MVC với Node.js và JavaScript. Ứng dụng đáp ứng tốt các yêu cầu chuyển đổi định dạng đa dạng kết hợp bộ công cụ chỉnh sửa hình ảnh trực quan, tốc độ xử lý nhanh và cơ chế xử lý lỗi an toàn. Công trình là tài liệu tham khảo thực tế cho sinh viên ngành công nghệ thông tin trong việc thiết kế hệ thống phần mềm và tổ chức làm việc nhóm hiệu quả.
