Xây dựng ứng dụng chỉnh sửa và xử lý ảnh

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN XÂY DỰNG ỨNG DỤNG CHỈNH SỬA VÀ XỬ LÝ ẢNH Giảng viên hướng dẫn: ThS Mai Trọng Khang Sinh viên thực hiện: Huỳnh Trọng Phục 19522030 Hồng Dận Quang 19522092 TP HỒ CHÍ MINH, 2022 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN XÂY DỰNG ỨNG DỤNG CHỈNH SỬA VÀ XỬ LÝ ẢNH Giảng viên hướng dẫn: ThS Mai Trọng Khang Sinh viên thực hiện: Huỳnh Trọng Phục 19522030 Hồng Dận Quang 19522092 TP HỒ CHÍ MINH, 2022 LỜI CẢM ƠN Sau trình học tập rèn luyện khoa Công nghệ phần mềm trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM chúng em trang bị kiến thức kỹ thực tế để hồn thành Đồ án Chúng em xin gửi lời cảm ơn chân thành đến: Ban Giám hiệu trường Đại học Cơng nghệ Thơng tin – ĐHQG TP.HCM tạo điều kiện sở vật chất với hệ thống thư viện đại, đa dạng loại sách tài liệu thuận lợi cho việc tìm kiếm nghiên cứu thơng tin Thầy Mai Trọng Khang tận tình giúp đỡ, hướng dẫn, trang bị cho chúng em kiến thức, kĩ cần có để hồn thành đồ án Đó góp ý quý báu khơng q trình thực đồ án mà hành trang tiếp bước cho chúng em trình học tập lập nghiệp sau Trong trình thực đồ án, kiến thức cịn hạn chế nên khơng tránh khỏi sai sót tìm hiểu, đánh giá trình bày đề tài Chúng em kính mong nhận quan tâm, góp ý thầy để đề tài chúng em đầy đủ hoàn thiện Chúng em xin chân thành cảm ơn TP Hồ Chí Minh, ngày 21 tháng 12 năm 2022 Sinh viên HUỲNH TRỌNG PHỤC HOÀNG DẬN QUANG NHẬN XÉT CỦA GIẢNG VIÊN MỤC LỤC CHƯƠNG GIỚI THIỆU CHUNG 1.1 Lý chọn đề tài 1.2 Mục tiêu .8 1.3 Đối tượng sử dụng .9 1.4 Phạm vi nghiên cứu .9 1.5 Phương pháp thực CHƯƠNG CƠ SỞ LÝ THUYẾT 10 2.1 Ngơn ngữ lập trình Dart 10 2.1.1 Giới thiệu chung 10 2.1.2 Lợi ích sử dụng 10 2.2 Flutter SDK 11 2.2.1 Giới thiệu chung 11 2.2.2 Lợi ích sử dụng 11 2.3 Flutter Canvas CustomPainter 12 2.4 SVG Color Matrix .13 CHƯƠNG PHÂN TÍCH, THIẾT KẾ ỨNG DỤNG 16 3.1 Mô tả ứng dụng 16 3.2 Phân tích yêu cầu .16 3.2.1 Mơ hình Use case 16 3.2.1.1 Mơ hình Use case tổng qt 16 3.2.1.2 Mơ hình Use case thêm, chỉnh sửa, xóa ảnh 17 3.2.1.3 Mơ hình Use case vẽ tự 18 3.2.1.4 Mơ hình Use case chỉnh sửa ảnh 19 3.2.1.5 Mơ hình Use case thêm, xóa chữ 20 3.2.1.6 Mơ hình Use case thêm, xóa nhãn dán 21 3.2.1.7 Mơ hình Use case thêm, xóa hình học 22 3.2.2 Danh sách Actor 22 3.2.3 Danh sách Use case 22 3.2.4 Đặc tả yêu cầu 24 3.2.4.1 Đặc tả yêu cầu thêm ảnh 24 3.2.4.2 Đặc tả yêu cầu cắt ảnh 25 3.2.4.3 Đặc tả yêu cầu xoay ảnh 25 3.2.4.4 Đặc tả yêu cầu điều chỉnh thuộc tính ảnh .26 3.2.4.5 Đặc tả yêu cầu chọn lọc ảnh 26 3.2.4.6 Đặc tả yêu cầu chỉnh sửa ảnh 27 3.2.4.7 Đặc tả yêu cầu vẽ tự 28 3.2.4.8 Đặc tả yêu cầu thêm chữ .29 3.2.4.9 Đặc tả yêu cầu thêm nhãn dán 30 3.2.4.10 Đặc tả yêu cầu thêm hình học .31 3.2.4.11 Đặc tả yêu cầu lưu, hoàn tác, thực lại 33 3.3 Luồng xử lý 34 3.3.1 Luồng xử lý thêm ảnh 34 3.3.2 Luồng xử lý cắt ảnh .35 3.3.3 Luồng xử lý xoay ảnh 36 3.3.4 Luồng xử lý điều chỉnh thuộc tính ảnh .37 3.3.5 Luồng xử lý chọn lọc ảnh 38 3.3.6 Luồng xử lý chỉnh sửa ảnh 39 3.3.7 Luồng xử lý vẽ tự 40 3.3.8 Luồng xử lý thêm chữ 41 3.3.9 Luồng xử lý thêm nhãn dán 42 3.3.10 Luồng xử lý thêm hình học .43 3.3.11 Luồng xử lý lưu, hoàn tác, thực lại 44 3.4 Thiết kế kiến trúc .45 3.5 Thiết kế giao diện 45 3.5.1 Danh sách hình 45 3.5.2 Chi tiết hình 46 3.5.2.1 Chi tiết hình trang chủ 46 3.5.2.2 Chi tiết hình chỉnh sửa tự 47 3.5.2.3 Chi tiết hình chỉnh sửa ảnh đơn 47 3.5.2.4 Chi tiết hình thêm ảnh 48 3.5.2.5 Chi tiết hình cắt ảnh 49 3.5.2.6 Chi tiết hình điều chỉnh thuộc tính ảnh 49 3.5.2.7 Chi tiết hình lọc ảnh 50 3.5.2.8 Chi tiết hình thêm chữ 50 3.5.2.9 Chi tiết hình thêm nhãn dán 52 3.5.2.10 Chi tiết hình vẽ tự 52 3.5.2.11 Chi tiết hình mẫu thiết kế sẵn 53 3.5.2.12 Chi tiết hình chỉnh sửa ảnh 53 CHƯƠNG TỔNG KẾT 55 4.1 Cài đặt thử nghiệm 55 4.1.1 Mức độ hoàn thành 55 4.1.2 Môi trường phát triển 55 4.1.3 Môi trường triển khai 55 4.1.4 Đường dẫn Github .55 4.2 Kết đạt 55 4.3 Hướng phát triển 56 4.4 Bảng phân công công việc 57 TÀI LIỆU THAM KHẢO 58 CHƯƠNG GIỚI THIỆU CHUNG 1.1 Lý chọn đề tài Cùng với phát triển không ngừng công nghệ thông tin, siêu phẩm điện thoại thông minh đời, thiết bị di động điện thoại, máy tính bảng, máy nghe nhạc, selfie ngày phát triển mạnh mẽ, tạo nên cạnh tranh hãng phát triển di động Ngày nhiều sản phẩm di động thông minh đời nâng cấp cải thiện lớn hiệu suất cấu hình cao đáp ứng nhu cầu người sử dụng Bên cạnh chức quan trọng smartphone, chức khơng thể thiếu camera chụp ảnh, để lưu trữ lại kỷ niệm đẹp, khoảnh khắc ý nghĩa Những smartphone ngày cải thiện tính lẫn chất lượng phần cứng, camera điện thoại ngày hoàn thiện hơn, áp dụng công nghệ xử lý ảnh tiên tiến ảnh đẹp trân thực nhất, đáp ứng nhu cầu chụp ảnh, selfie với chất lượng hình ảnh cao Tuy nhiên, camera mặc định điện thoại thường cho hình ảnh thơ khơng làm hài lịng người sử dụng, họ muốn biến ảnh bật sau chụp trở nên lung linh sắc nét hơn, với hiệu ứng biến đổi màu sắc, hiệu ứng khung ảnh, làm cho ảnh trở nên khác biệt Và họ cần ứng dụng khác biệt thay ứng dụng mặc định mà hệ điều hành cung cấp tùy chỉnh ảnh sau chụp theo sở thích người Gần đây, số lượng hình ảnh chụp, chỉnh sửa tải lên tảng mạng xã hội khác tăng lên đáng kể Ước tính cho thấy Instagram có 90 triệu hình ảnh tải lên hàng ngày Facebook có 300 triệu ảnh tải lên ngày Chỉnh sửa ảnh trước tải lên hiển thị với giới trở thành tiêu chuẩn: điều chỉnh nhẹ chỉnh sửa ảnh mạnh mẽ, người chỉnh sửa hình ảnh Bởi trước nhu cầu lợi đó, chúng em định nghiên cứu thực đề tài “Xây dựng ứng dụng chỉnh sửa xử lý ảnh” 1.2 Mục tiêu Đề tài “Xây dựng ứng dụng chỉnh sửa xử lý ảnh” bao gồm mục tiêu chính:  Tìm hiểu chỉnh sửa xử lý ảnh - Tìm hiểu kiến thức ảnh - Tìm hiểu cách thức chỉnh sửa xử lý ảnh - Tìm hiểu ứng dụng chỉnh sửa xử lý ảnh - Tìm hiểu xu hướng tương lai chỉnh sửa xử lý ảnh - Tìm hiểu cách xây dựng ứng dụng chỉnh sửa xử lý ảnh  Xây dựng ứng dụng - Áp dụng nội dung tìm hiểu vào xây dựng ứng dụng hoàn chỉnh 1.3 Đối tượng sử dụng Đối tượng sử dụng bao gồm tất đối tượng có nhu cầu tìm hiểu sử dụng ứng dụng chỉnh sửa xử lý ảnh 1.4 Phạm vi nghiên cứu  Phạm vi môi trường Ứng dụng xây dựng Framework Flutter với ngôn ngữ Dart hệ điều hành Android  Phạm vi chức - Tìm hiểu cơng nghệ chỉnh sửa xử lý ảnh - Xây dựng ứng dụng chỉnh sửa xử lý ảnh 1.5 Phương pháp thực  Phương pháp làm việc Làm việc nhóm thành viên hướng dẫn giảng viên hướng dẫn  Phương pháp nghiên cứu - Phân tích nhu cầu sử dụng đối tượng người dùng - Nghiên cứu tài liệu công nghệ liên quan  Phương pháp cơng nghệ - Tìm hiểu ngơn ngữ lập trình cơng cụ - Tìm hiểu cách thức xây dựng ứng dụng - Xây dựng ứng dụng chỉnh sửa xử lý ảnh CHƯƠNG CƠ SỞ LÝ THUYẾT 2.1 Ngơn ngữ lập trình Dart 2.1.1 Giới thiệu chung Dart ngơn ngữ lập trình đa mục đích ban đầu phát triển Google sau Ecma (ECMA-408) phê chuẩn làm tiêu chuẩn Nó sử dụng để xây dựng ứng dụng web, server, máy tính để bàn thiết bị di động Dart ngôn ngữ hướng đối tượng, xác định theo lớp, với chế garbage-collected, sử dụng cú pháp kiểu C để dịch mã tùy ý sang JavaScript Nó hỗ trợ interface, mixin, abstract, generic, static typing sound type Dart ngôn ngữ mã nguồn mở miễn phí, phát triển GitHub Một số khía cạnh Dart khiến phù hợp với Flutter là: - Nó có garbage collector hệ nhanh Điều hữu ích Flutter tn theo mơ hình lập trình reactive đối tượng UI tạo hủy nhanh chóng - Trình biên dịch trước thời hạn Dart cho phép biên dịch trực tiếp mã Điều cho phép khởi động nhanh đạt hiệu suất phù hợp - Dart tập trung vào trải nghiệm tốt cho lập trình viên - Dart có thuật toán tree shaking – phần framework Flutter sử dụng đưa vào ứng dụng cuối 2.1.2 Lợi ích sử dụng Một số lợi ích Dart kể đến sau: - Năng xuất: Cú pháp Dart rõ ràng súc tích, cơng cụ đơn giản mạnh mẽ Type-safe giúp bạn xác định sớm lỗi tinh tế Dart có thư viện cốt lõi hệ sinh thái gồm hàng ngàn package - Nhanh: Dart cung cấp tối ưu hóa việc biên dịch trước thời hạn để có dự đốn hiệu suất cao khởi động nhanh thiết bị di động web - Khả di động cao: Dart biên dịch thành mã ARM x86, để ứng dụng di động Dart chạy tự nhiên iOS, Android Đối với ứng dụng web, chuyển mã từ Dart sang JavaScript - Dễ tiếp cận: Dart quen thuộc với nhiều nhà phát triển có, nhờ vào cú pháp định hướng đối tượng khơng gây ngạc nhiên Nếu bạn biết C ++, C # Java, bạn làm việc hiệu với Dart sau vài ngày 10 3.3.11 Luồng xử lý lưu, hoàn tác, thực lại Hình 3.3.11.1: Sơ đồ luồng xử lý chức lưu, hoàn tác, thực lại 44 3.4 Thiết kế kiến trúc Hình 3.4.1: Mơ hình kiến trúc ứng dụng Ứng dụng xây dựng phát triển theo mơ hình Model - View ViewModel (MVVM) Mơ hình cho phép tách biệt liệu (Model), mã thực thi (logic hay ViewModel) giao diện người dùng (View) Các thành phần mang vai trò sau: View: View phần giao diện ứng dụng để hiển thị liệu nhận tương tác người dùng Lớp quan sát ViewModel khơng chứa logic ứng dụng Nó có khả thực hành vi phản hồi lại người dùng thơng qua tính binding, command Model: Model thành phần lưu trữ liệu ứng dụng, giúp truy xuất thao tác liệu thực Model ViewModel phối hợp với để lấy lưu liệu ViewModel: ViewModel lớp trung gian View Model Nó chứa mã lệnh cần thiết để thực data binding, command 3.5 Thiết kế giao diện 3.5.1 Danh sách hình STT Tên hình Mơ tả Trang chủ Màn hình trang chủ ứng dụng Chỉnh sửa tự Màn hình chỉnh sửa tự Chỉnh sửa ảnh đơn Màn hình chỉnh sửa ảnh đơn Thêm ảnh Màn hình thêm ảnh để chỉnh sửa Cắt ảnh Màn hình cắt ảnh Điều chỉnh thuộc tính ảnh Màn hình điều chỉnh thuộc tính ảnh Bộ lọc ảnh Màn hình chọn lọc cho ảnh 45 Thêm chữ Màn hình thêm chữ Thêm nhãn dán Màn hình thêm nhãn dán 10 Vẽ tự Màn hình vẽ tự 11 Mẫu thiết kế sẵn Màn hình chọn mẫu thiết kế sẵn 12 Chỉnh sửa ảnh Màn hình chỉnh sửa ảnh 3.5.2 Chi tiết hình 3.5.2.1 Chi tiết hình trang chủ Hình 3.5.2.1.1: Giao diện hình trang chủ 46 3.5.2.2 Chi tiết hình chỉnh sửa tự Hình 3.5.2.2.1: Giao diện hình chỉnh sửa tự 3.5.2.3 Chi tiết hình chỉnh sửa ảnh đơn Hình 3.5.2.3.1: Giao diện hình chỉnh sửa ảnh đơn 47 3.5.2.4 Chi tiết hình thêm ảnh Hình 3.5.2.4.1: Giao diện hình thêm ảnh 48 3.5.2.5 Chi tiết hình cắt ảnh Hình 3.5.2.5.1: Giao diện hình cắt ảnh 3.5.2.6 Chi tiết hình điều chỉnh thuộc tính ảnh Hình 3.5.2.6.1: Giao diện hình chỉnh sửa thuộc tính ảnh 49 3.5.2.7 Chi tiết hình lọc ảnh Hình 3.5.2.7.1: Giao diện hình chỉnh sửa thuộc tính ảnh 3.5.2.8 Chi tiết hình thêm chữ 50 Hình 3.5.2.8.1: Giao diện hình thêm chữ 51 3.5.2.9 Chi tiết hình thêm nhãn dán Hình 3.5.2.9.1: Giao diện hình thêm nhãn dán 3.5.2.10 Chi tiết hình vẽ tự Hình 3.5.2.10.1: Giao diện hình vẽ tự 52 3.5.2.11 Chi tiết hình mẫu thiết kế sẵn Hình 3.5.2.11.1: Giao diện hình vẽ tự 3.5.2.12 Chi tiết hình chỉnh sửa ảnh 53 Hình 3.5.2.12.1: Giao diện hình vẽ tự 54 CHƯƠNG TỔNG KẾT 4.1 Cài đặt thử nghiệm 4.1.1 Mức độ hồn thành STT Tên cơng việc Mức độ hồn thành Tìm hiểu cách chỉnh sửa xử lý ảnh 100% Xây dựng ứng dụng chỉnh sửa xử lý ảnh 100% Ghi 4.1.2 Môi trường phát triển - Hệ điều hành: Microsoft Windows 11 - Công cụ phát triển ứng dụng: Android Studio, Visual Studio Code, Android virtual devices - Ngôn ngữ phát triển: Dart (Flutter) - Hệ quản trị sở liệu: Firebase - Công cụ hỗ trợ: GitHub 4.1.3 Môi trường triển khai - Hệ điều hành: Android - Yêu cầu phần mềm:  Android API 21 trở lên - Yêu cầu phần cứng  RAM 2GB trở lên  Có máy ảnh hoạt động 4.1.4 Đường dẫn Github Đường dẫn GitHub đồ án: https://github.com/troqphuc147/lumine 4.2 Kết đạt Kết thúc giai đoạn phát triển, đồ án đạt kết mong đợi, theo kế hoạch, mục tiêu ban đầu  Ưu điểm - Giao diện thân thiện, dễ sử dụng - Tốc độ, hiệu suất tốt - Hệ thống có khả phát triển mở rộng cao 55  Vấn đề tồn đọng - Chưa kiểm thử đầy đủ chi tiết  Qua thời gian thực đồ án, nhóm hồn thành đạt số kết sau: - Hiểu áp dụng kiến thức chỉnh sửa xử lý ảnh - Hiểu nắm rõ ngơn ngữ lập trình Dart, Flutter SDK - Phát triển kỹ làm việc nhóm kỹ cá nhân 4.3 Hướng phát triển Ứng dụng chỉnh sửa xử lý ảnh hoàn thành chức đề ban đầu nhiên cịn chưa hồn thiện, cịn nhiều khả mở rộng: - Cải thiện trải nghiệm người dùng - Xây dựng tính tự động xử lý ảnh - Xây dựng tính xử lý video GIF - Tối ưu hóa code để tăng tốc độ xử lý - Sưu tầm, thiết kế thêm mẫu ảnh sáng tạo Ứng dụng chỉnh sửa xử lý ảnh hữu ích có khả ứng dụng vào thực tiễn cao Tuy nhiên, hạn chế thời gian nghiên cứu kinh nghiệm, nhóm chưa phát huy hết tiềm đề tài Trong thời gian tới, nhóm cố gắng tìm hiểu sâu cơng nghệ xử lý ảnh, cách áp dụng vào thực tế, xây dựng tính nêu nhằm phát triển mở rộng quy mô đồ án 56 4.4 Bảng phân công công việc STT Tên công việc Thành viên Trọng Phục Dận Quang Chuẩn bị, lên kế hoạch x x Tìm hiểu cơng nghệ x x Khảo sát, đặc tả yêu cầu x x Thiết kế kiến trúc x x Thiết kế liệu x x Thiết kế giao diện x x Xây dựng tính thêm ảnh x x Xây dựng tính chỉnh sửa ảnh x x Xây dựng tính vẽ tự x x 10 Xây dựng tính chỉnh sửa ảnh x x 11 Xây dựng tính thêm chữ x x 12 Xây dựng tính thêm nhãn dán x x 13 Xây dựng tính thêm hình học x x 14 Kiểm tra sửa lỗi x x 15 Viết tổng hợp báo cáo x x Tỷ lệ công việc phân công 60% 40% Mức độ hoàn thành 100% 100% 57 TÀI LIỆU THAM KHẢO Trang chủ Flutter: https://flutter.dev/ Diễn đàn cơng nghệ lập trình viên https://stackoverflow.com/ Bách khoa toàn thư mở Wikipedia https://www.wikipedia.org/ Giới thiệu Flutter Canva cách sử dụng https://www.kodeco.com/26483389-flutter-canvas-api-getting-started Cách thay đổi lọc màu ảnh SVG https://developer.mozilla.org/enUS/docs/Web/SVG/Element/feColorMatrix?fbclid=IwAR0OrjN_Spxb6mtIPa x_K1nmKd7vzvY349XNhfbbJXhHUGY-OOeR1BTNKS0 58 ... thức chỉnh sửa xử lý ảnh - Tìm hiểu ứng dụng chỉnh sửa xử lý ảnh - Tìm hiểu xu hướng tương lai chỉnh sửa xử lý ảnh - Tìm hiểu cách xây dựng ứng dụng chỉnh sửa xử lý ảnh  Xây dựng ứng dụng - Áp dụng. .. đề tài ? ?Xây dựng ứng dụng chỉnh sửa xử lý ảnh? ?? 1.2 Mục tiêu Đề tài ? ?Xây dựng ứng dụng chỉnh sửa xử lý ảnh? ?? bao gồm mục tiêu chính:  Tìm hiểu chỉnh sửa xử lý ảnh - Tìm hiểu kiến thức ảnh - Tìm... Thêm, chỉnh sửa, xóa ảnh Thêm, xóa ảnh vào hình để thực chỉnh sửa Thêm ảnh Thêm nhiều ảnh vào hình chỉnh sửa ảnh Chụp ảnh từ máy ảnh Chụp ảnh từ máy ảnh để thêm ảnh vào hình chỉnh sửa ảnh Chọn ảnh