Xây dựng ứng dụng chụp và chỉnh sửa ảnh trên nền tảng IOS

Một số thông tin CO’ bản về ứng dụng- Tên ứng dụng: EasyFilter • Chia sẻ lên mạngxã hội ủ ng dụng Easy Filter sẽ bao gồm: • Đổi Camera trước vàsau - Saukhi chụp sẽ hiện ra giaodiện gồm 2

NGUYEN VĂN HIÉU

XÂY DỤNG ỦNG DỤNG CHỤP VÀ CHỈNH SỦA ẢNH TRÊN NỀN

TẢNG IOS

Chuyên ngành: Côngnghệ thông tin

ĐỒÁN TỐT NGHIỆP ĐẠI HỌC

Hà Nôi -Năm 2017

1.1 Một số thông tin CO' bản về ứng dụng 1

1.2 Tính cấp thiết và lý do chọn đề tài 2

1.3 Mục tiêu xây dựng 4

1.4 Đối tuợng và phạm vi của đề tài 5

1.5 Kết quả đạt đưọc 5

CHƯƠNG 2: KHẢO SÁT HỆ THỐNG 6

2.1 Một số vấn đề gặp phải 6

2.2 Hướng giải quyết bài toán 6

2.3 Xác định yêu cầu hệ thống 6

CHƯƠNG 3: PHÂN TÍCH THIẾT KÉ 8

3.1 PHÂN TÍCH CHÚC NĂNG HỆ THÔNG 8

3.1.1 Xác định chức năng nghiệp vụ 8

3.1.1.1 Xácđịnh chức năngchi tiết 8

3.1.1.2 Gom nhóm chức năng 9

3.1.1.3 Sơ đồphânrã chức năng(BFD) 11

3.1.2 Xác định luồng thông tin nghiệp vụ 12

3.1.2.1 Sơ đồ luồngmứcngữ cảnh 12

3.1.2.2 Sơ đồ luồng dữ liệu mức đinh 13

3.1.2.3 Sơ đồ luồng dữliệu mứcdướiđình 14

3.1.3 Đặc tả chức năng 18

3.1.3.1 Đặc tảchứcnăng“Chức năng chụp ảnh” 18

3.1.3.2 Đặc tảchứcnăng“Chức năng chọnảnh” 18

3.1.3.3 Đặctả chức năng“Chức năng chinh sứa ảnh” 19

3.1.3.4 Đặc tà chức năng“Chức năng chiasẻ” 20

3.3.1 Thiết kế tổng thể 21

3.3.1.1 Phân địnhthủcông-máytính 21

CHƯƠNG 4 TRIẼN KHAI VÀ KẾT QUẢ 24

4.1 Giao diện nguôi dùng 24

4.1.1 Giao diện khi mở ứng dụng và giao diệnchinh sửa ánh: 24

4.1.2 Giao diện chụpánh: 25

4.1.3 Giao diện thư việnảnh: 26

4.1.4 Giao diện chia sé: 27

4.1.5 Giao diện chứcnăngápdụng bộ lọc, cắt ánh: 28

4.2 Mô tả chi tiết 29

KÉT LUẬN 44

TÀI LIỆU THAM KHẢO 45

Bảng biểu Tên bảng biểu Trang

Báng1.1 Báng gom nhóm chức năng đơn giản 5-6

Hình 1.2.2 Sơ đồ luồng dừ liệu mức đinh 10

Hình 1.2.3 Sơ đồluồng dừliệu mức dưới đinh tiếntrình

Hình 1.2.5 Sơ đồluồng dữliệu mức dưới đỉnhtiếntrình

“ Chức năng chinh sửa ảnh ”

13

Hình 1.2.6 Sơ đồluồng dừliệumức dưới đinh tiến trình

Hình 4.1.1 Giao diệnkhi mớ ứng dụng và giao diệnchinh

sửaảnh

21

Hình 4.1.5 Giao diệnchức năng áp dụngbộlọc,cắt ảnh 25

Hình 4.2.7 Bộ lọcmàu ảnh phim màu cũ(vintage) 35

Hình 4.2.8 Bộ lọc màuđen trắng (B&W) 36

Hình 4.2.9 Bộlọc màu ám tím (Purple) 37

Chuyênngành: Công nghệthông tin Khóa: 2013-2017Giáo viên hướng dẫn: TS NguyễnĐứcTuấn

Tên đề tài: Xây dựng phần mềm chụp và chình sửaảnh trên nen tảngiOSTóm tắt:Phầnmềm xâydụnggiúpngườidùngsửdụng điệnthoải chụp ánhvàápdụng các bộlọcmột các dễdàng và thuậntiện.Côngnghệsứdụng trong đề tài là ngônngừlập trình Swift và IDE Xcodc

Đồán được chia thành cácchương vớinội dung như sau:

• Chương 1 Tống quan:Các thông tin cơ bàn về ứng dụng

• Chương 2 Khảo sát hệ thống

• Chuơng 3. Phân tích thiết ke

• Chương 4 Triền khai và kết quả

• Chương 5:Kết luận:Chương này đưa ra ưu điểm vànhữnghạnchế cùađồán

ngữ/Ngoại ngữ

Environment

làphần mềm máy tínhgiúp lậptrình viên trong việc phát triểnphầnmềm

nói đến3 ánh sáng

Đó (red) - xanh lá (green) - xanh dương(blue) làba màu gốc hoà vào nhau theo nhiềucách khác nhau đểtạothành cácmàu khác

3 RGBA/rgba Red - Green -

Blue - Apha

Tưorngtự RGB nhưng có them yếutố kênhtrongsuốt (độsắcnét) -alpha

chỉ đến ống kínhchụpảnh đặt ở sau lưng và phía trướcđiệnthoại

native” ám chỉ ứngdụng chỉ chạytrênnền tảng ĨOS,không lấy dừ liệu từ đâu khác

của em.Đe có thethực hiện và hoànthành đồ án này, emđã nhận đượcsựhướng dẫn vàgiúpđỡ rấtnhiệttình của các thầy cô vàcác bạntrong Khoa Công NghệThông Tin- Viện Đại họcMởHà Nội Em xin gửi lờicảm ơn chân thành

và sâu sắc tới các thầy, các cô trongKhoa, những ngườiđã tận tình giảngdạy

vàtruyền đạt những kiến thức cầnthiết, những kinh nghiệmquý báo cho em trong suốt bốn năm học tại Viện Đại học Mờ Hà Nội đề em có thểtựtin khithựchiện đồán này

Đặcbiệt, em xin cảm ơn thầy NguyễnĐức Tuấn, người đã tận tình, chi bảo độngviên và hỗ trợ em trong suốt quátrình thực hiện đề tàinày Trong thời gian làm đồ án cùngthay, em không những họchỏi được nhữngkiến thức mà cònhọc được khả nănglàm việcnghiêm túc, độc lậpvàcótrách nhiệmvới côngviệc của minh

Mặc dù,em đãcốgắnghoàn thiện đồ án trongphạmvi và khãnăngcho phép củamình,những chắcchắn không tránhkhỏi những thiếu sót Em xinkínhmong nhậnđược sự thông cảm và góp ý của các thầy, các côvà các bạn

Cuối cùng em xinkính chúc cácthầy cômạnh khỏe,luônluôn lànhững người láiđòâncầndìu dắtcác thế hệtiếp theo củaFITHOUtrưởng thành

Em xin xin chân thành câm ơn !

CHƯƠNG 1 TÓNG QUAN1.1 Một số thông tin CO’ bản về ứng dụng

- Tên ứng dụng: EasyFilter

• Chia sẻ lên mạngxã hội

ủ ng dụng Easy Filter sẽ bao gồm:

• Đổi Camera trước vàsau

- Saukhi chụp sẽ hiện ra giaodiện gồm 2 chức năng:

• Use Photo (Sử dụng ánh)

• Retake (Chụp lại)

- Trong Edit Photo sẽ có các chức năng:

• Filter

• Crop

• Border

Trong đó, mỗi giao diện có các chức năng sau:

- Giao diện chính:Là giaodiệnmà người dùng vàovànhìn thấyđầu tiên, bao gồm các nút điềuhướng đến các chức năngnhỏ hơn

- Giao diện chọn ảnh:

• Hiện ra các albumànhcủa người dùng, cho phép ngườidùng chọnảnh đổchinhsứa

- Giao diện chụp ảnh:gồm 2chức năng:

• Chụp ánh- Chụptấm ánh, chọn lưulại hoặc không

sau

- Giao diện chỉnh sửa ảnh: gồm 3 chứcnăng:

• Áp dụng bộ lọc: Cho phép người dùng chọn nhanh các hiệuứng đã có sằncho ảnh

• Cắt: Chophépngười dùng cắt bức ảnh

• Khung viền: Cho phépngười dùng thay đổikhung viền cho bức ảnh

- Chia sẻ:Hiện ra icon ứng dụng Facebook hoặc Twitter cho đếphépngườidùng share lên

1.2 Tính cấp thiết và lý do chọn đề tài

Cùng với sự phát triển chóng mặtcủa ngành côngnghệmobilengày nay,chụp ảnhvà đăng lên cáctrangmạng xã hộiđểkhoevới bạn bè hoặclưu lạicác khoảnh khắc để sau này nhìn lại nhu cầu chung cúa toàn xãhội Khi đi du

lịch,đi ăn, đi chơinóichung có thế nhìnthấyrấtnhiềungười luôncầm trên tay

1 chiếc điện thoạiđế chụp ánh.Hay thâm chí ngồi trong lớp học cũngcó thểthấy học sinh cầm điện thoại chụp lại bàigiảng trên báng,tài liệu V.V Và khilướt trên cáctrang mạng xã hội, có thế thấy các bứcánh được táilên rất nhiềunhằmchiasè lại các khoảnh khắc của người dùng Theo thống kê,có đến 350 triệu tam ảnh được tãi lên Facebook mỗingày(vào thời diếmnăm2013)[ 1 ], hay như Instagramcóđến 150triệu bức ảnh được đăng lên chi sau 10 tháng kế

từ khixuất hiện[2] Đólà nhữngcon số rấtlớn, chưa kế đến những tấm ánh đã được chụp nhưng ngườidùngvẫncòn lưutrong máy, haychụpxong chi khoe với nhữngngườixung quanh không chia sẻlên mạngxã hội với nhiều lý do

Vì thế,vớimột nhucầu lớn như vậy, đây sẽ là một mảnhđấtmàu mỡ để làm

ramộtứngdụngchụpánhnhằm mục đích cạnh tranh, trong đó chú yếuhướng đến tính năngsử dụng hiệu ứng (vốn là nhu cầu chính sau khichụp ảnh xong) nhằm đơn giản hoá việc chỉnhsừa ánh chongườidùng Đây là lý do em chọn

đềtài “Xây dựng ứngdụng chụp ánh trên nền tàng ĨOS”

ứng dụng xừ lý ảnh được xây dựng nhàm cungcấp tiện ích cho người dùng cóthể chụp anh,chỉnh sứa ánh nhanh chóng, tạohiệuứngtạocáchiệuứng theo ý muốn từcác hiệu ứng được cung cấp sẵnvà được cậpnhật thêm đều đặn và chia sẻ trôn cácmạngxã hội như Twitter, Facebook Như vậy sẽtạothuậnlợihơn cho người sửdụng Giúpngườidùngkhông cầntốncông sức học thêm cách sử dụng các côngcụ phức tạptrênmáytính đểbàn như Photoshop,Lightroom,V.V vốn rấtphứctạp và không phải ai cũng cóthể sữ dụng được.Đồng thời không cầnmất thời gian chuyền ảnh qua máy tính có the córủi ro(như lồi, bị giám chất lượng) khi chuyền (dù rất nhó) Giúp ngườidùng tiết kiệm được rất nhiều thời gian khicần post 1 bức ảnhđẹp lêncác trang mạng

xã hội

1.3 Mục tiêu xây dựng

Đe tàidự định ứng dụng sẽ đạt được cáctính năngsau:

- Giúpcho người dùngcó thếlưu lại những bứcảnhmong muốn, ứng dụng nàychophépngười dùng có thể chụpành vàlưutrữ trên máy

- Với tính năng tạo hiệu ứng, người dụngcó thế thêm vào bức ánh cùa mìnhnhững hiệuứng ngộ nghĩnh, đáng yêu với các thao tácđơn giản Ngườidùng không cần biếtnhiềuvề việc xử lý ảnh Có rất nhiều loại hiệu ứng khác nhau nhưngvới mục đíchgiới thiệu emchỉ đưa vào những hiệu ứng cơbàn nhất

- Vớitinhnăng cắtãnh, người dùng có thelấynhững phần mong muốn trênbứcảnh,thay vì phải toàn bộảnh Trongtính năng cắtảnh, hiện tại thuật toán đang cắt ảnh theo 1 khunghình chừ nhật chứ chưacắt được chitiết theo đa giác

- Với tính năng chèn khungảnh, người dùng cóthelựa chọn cho mình mộtcái khung phù hợpvới bứcánh đetrang trí thèm Trong tính năng chèn khung này, người dùng có the zoom ành saukhi chèn khung để sao chophù họp với khungánh và lưu lại trên máy

- Vớitính năng chiasẻmạngxãhội, người dùng có thề chia sẻ nhữngbức ảnh ngô nghĩnhvới cộng đồng mạng trên twitter,facebook

Những côngnghệ,kĩthuật,giảipháp sử dụng:

- Sứdụng ngônngữ lập trình Swift, Objective-C, OpenGL Shading Laguage

- IDE: sửdụng Xcodc

- Đây là một ứng dụng native nên các tínhnăngxử lý tại mobilengười dùng.Định hướngsẽ tạo một server xử lýảnh vàmộtserver lưutrữảnh Đêchuyển

đối sangmô hìnhcloud Giúpcho người dùng giám dung lượng trên máy thật, các tính năng đượccập nhật thường xuyên, mớinhất, giảm dung lượngứng dụngvàcó thế khôiphục lại ãnh khi bị mất.

1.4 Đối tượng và phạm vi của đề tài

- Đối tưọ'ng đề tài:Quy trình hoạt độngcủa ứng dụng chụp và chinh sứa ánh

- Phạm vi đề tài: Sửdụng kiếnthức cơ bản cúa môn họcphân tích và thiết kế

hệ thống thông tin đế xâydựng, mô tả cáckhodừ liệu, mô hình xử lý và giãi thuật đốivới hệ thống theoyêu cầu đểtạo ra ứng dụng sử dụng cho mục đíchchinh sửamàuảnh, cắt ành,phục vụ chomụcđích học tập về xử lýảnh cho người mới chụp

1.5 Kct quả đạt được

Trêncơ sở phântích quy trình quànlý học viên tại trung tâm,em sẽ thiết

kế một hệ thống chức năngcủa ứng dụng.Dựavào thiếtkế này, em có the thực hiện hóa thành ứngdụng chụp ảnh

CHƯƠNG 2: KHẢO SÁT HỆ THÓNG

Người dùngkhông phái ai cũng cũng có thế làmquen nhanh với côngnghệ Vì thế,khi tải một ứngdụng mới về có thiết kếquá khó hiểu,rối rắm sẽ gây khó dỗ cho ngườidùngtrongquátrình sứ dụng

ủng dụng mặc địnhcủa hệ điềuhànhcũng đã cungcấp kháđủ chức năngchongười dùng như các bộ lọc mang màu sắc hiện đại, chức năng cắt đầy đủ

Giong nhưmụctiêu ban đầu màbài toán đưa ra: đólàlàm đơn giãn hóa cách thứcchỉnh sửaánh cho ngườidùng Chính vì thế ứngdụngcầnđược thiết

kế thật đơn gián saochokhimở lên ngườidùng có thẻ sứ dụngngay mà không cần chạy bước hướng dẫn banđầu

Chươngtrìnhsẽ cungcấp một số bộ lọc khác với ứng dụng mặc địnhcủa

hệ điều hành,vídụ như bộ lọc sẽ mang hướng giả cố hơn

Chương trìnhđược viết ra vớimục đích đơn giản hóa việcchỉnh sứaãnh,giúpchongười dùngcó thề chinh sửa này nhanh chóng,đẹp và giảm đến mức tối thiếu các thaotác khôngđáng có

Chươngtrinh phục vụcho các đối tượng là các ngườidùng phố thônghiện đang sứ dụng smartphonechạy hệ điều hànhÍOS Chương trình viếtra phái đápứng tốithiếucác yêu cầusau:

- Yêu cầu chức năng:

• Chức năngchụp ánh

• Chức nănglưuảnh

• Chức năng tạo hiệu ứng, màu choánh

• Chức năngcắtánh theo khung vuông/chừ nhật

Chức năng chèn khungvàoảnh.

Chức năngchia sẻ ánh

Yêu cầu phi chức năng:

Hiệuquảsừ dụng rõ rệt,đápứng được các yêu cầu khách quannhư: nhanhchóng,đẹp

Giao diện thiết kế thânthiện với người sử dụng, dễ sửdụng, dễhiểu,dễ nắmbắt đối với người sử dụng

Thời giankhởi động, truy cập,xửlý thôngtin và phànhồi nhanh

Chương trình phái tươngthích với các hẹ điềuhành, phần cứng, phần mềm phổ biến được sử dụnghiện nay và khôngyêucầu quá cao về cầuhình máy tính

CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ

3.1 PHÂN TÍCH CHỨC NĂNG HỆ THÓNG

Đê xâydựng hệ thốngcho ứng dụng, vấn đề đautiên làphântích hệ thống nhằmtìm và chọn giái pháp thíchhợp và cụthế Trong quátrình phântích, ta tiếnhànhchuyền từ bài toán thựctếsangbài toán quản lý trênmáy tính, các sơđồ luồng dữliệu và thựcthổ liên kếtgiúp ta dễdàngxácđịnhđược các chức nănghệthống mà tađangthiết kế

3.1.1 Xác định chức năng nghiệp vụ

3.1.1.1 Xác định chức năng chi tiết

Dựa vàođặc tả ban đầu, tacó thế xác địnhchức năngbanđầucủa ứng dụng:(01) Vào Camera

(02) VàoCamera Roll (Thư viện ảnh)

(03) Vào chinh sửa ảnh

(17) Chọn chèn khung

(18) Chèn khung mìnhmuốn cho bức ãnh

(19) Lưuảnh sau khichèn khung

(20) Lưu ảnh sau khi chình sửa

(21) Chia sẻ bức ảnh lên mạng xã hội

3.1.1.2 Gom nhóm chức năng

❖ Gom nhóm các chức năng đơn giăn

Chức năng chi tiết Chức năng sau khi gom nhóm

(04) Bật/Tắt Flash

Chụpảnh(05) Chuyến đôi giữasử dụng

camera trước và sau

(06)Chụpảnh

(07) Xoá và chụp lại nếu chưa ưngỷ

Xửlýảnh(08) Lưuảnh đã chụp

(20) Lưu ảnh sau khi chinh sửa

bức ảnh

(15)Chọncắt ảnh

Cắt bức ảnh(16)Lưu bức ảnhsaukhi cắt

(21) Chiasẻ lên mạng xã hội Chia sẻlên mạng xã hội

Bảng 1.1.Bảng gomnhómchức năng đơn giàn

❖ Loại bỏ chức năng vô nghĩa trong hệ thống

ủ ng dụng Easy Filter

Xửlýãnh

Chọnãnhmuốnđược chinh sửa từ

Camera Roll

Chức năng chọn ảnh

Áp dụng bộ lọc choảnh

Chức năng chỉnh sửa ảnh

Cắt bức ảnh

Thay đôi khung viên

Chia sè lên mạngxãhội Chức năng chia sẻ

3 1 1.3 Sơ đồ phân rã chức năng (BFD)

Sơđồ phân rã chức nănghệ thống quán lýhọcviên:

Hình 1.1.Sơ đồphânrã chức năng

Mô tả chi tiết chức năng:

❖ Chức năng chụp ảnh:

- Chụp ánh: Ngườidùngsẽ sử dụng cácchức năng được cấpsẵn trongứng dụng

đểchụp lạibức ảnh mà người dùng muốn

- Xử lý ảnh: Sau khichụp, người dùng có thế tuỳ chọn sử dụng hình ánh đóhoặc xoá nó, chụp lại tấm khác

❖ Chức năng chọn ảnh:

dụnglên,chọnCameraRoll, các folder chứa ảnh sẽhiện ra,ngườidùng sẽ chọn

I folder, rồi chọn 1tấm ảnh trong đó đế chình sửa hoặc chia sẻ theo ýmuốn

❖ Chức năng chỉnh ảnh:

áp dụng lên bức ảnh

- Cắt bức anh'. Ngườidùng sẽ sứ dụngchức năng crop, chọn phần cần giừ củatấm ảnh, cắt ra,loại bỏ những gócảnh mà người dùng không muốnxuấthiệntrong bức ánh.

chèn vào bức ảnh củangười dùng

❖ Chức năng chia sẻ:

- Chia sẻ bức ảnh lên mạng xã hội:Ngườidụng sau khi đãchụp/chọn/chĩnhsứa bức ánhxong có thể tươngtác với nút chia sẻđể chia sẻ lên Facebook hoặcTwitter

3.1.2 Xác định luồng thông tin nghiệp vụ

3.1.2.1 Sơ đồ luồng mức ngừcảnh

Sơ đồ luồng mức ngữ cảnh hệ thống hoạt động cua ứng dụng:

Hình 1.2.1 Sơ đồ luồng mứcngừ cánh

3.1.2.2 Sơ đồ luồng dừ liệu mức đĩnh

Hình 1.2.2 Sơđồluồngdừ liệu mức đinh

3.1.2.3 Sơ đồ luồng dừ liệu mức dướiđinh

So' đồ luồng dữ liệu mức dưói đỉnh tiến trình“Chức năng chụp anh

Hình 1.2.3 Sơđồ luồng dừliệu mức dướiđỉnhtiếntrình"Chụp ảnh ”

So - đồ luồng dữ liệu mức dưói đỉnh tiến trình “Chức năng chọn ảnh ”’.

Hình 1.2.4.Sơđồ luồngdữliệu mứcdướiđĩnh tiếntrình “Chọn ảnh ”

So - đồ luồng dữ liệu mức dưói đỉnh tiến trình “Chức năng chỉnh sửa ảnh” :

Hình 1.2.5.Sơ đồ luồngdừliệu mức dưới đinh tiếntrình "Chức năng chinh

sửa ánh "

So' đồ luồng dữ liệu mức dưó'i đỉnh tiến trình “Chức năng chia sẻ ” :

Hình 1.2.6.Sơ đồluồngdữ liệumứcdưới đỉnh tiến trình

• Đầu vào: Ngườidùng bật camera.

• Đầu ra: ảnh đã được chụp

- Phầnnội dung xứ lý: Người dùngsẽ sứ dụngcác chức năng mà ứng dụng cungcấp (baogồmFlash, cam trước/sau, focus) đếchụpbứchìnhmà ngườidùng mong muốn

❖ Xử lý ánh.

- Phần tiêu đề:

• Tên chức nãng: Xứ lýành saukhi chụp

• Đầu vào: Ảnh đã được chụp

• Đầu ra: Lưu ảnh vàomáy

- Phần nộidungxử lý: Sau khi chụp ứng dụng sẽ hỏi người dùng cómuốnsửdụng bức ảnhđó haykhông Neu có, ảnh sẽ đượclưu Neukhông, ảnh sẽ bị xoá

3.1.3.2 Đặc tả chức năng “Chức năngchọn ảnh”

❖ Chọn ảnh cần chính sửa và chia sẻ

- Phần tiêu đề:

• Tênchức năng: Chọn ảnh cầnchinh sửa và chia sẽ

• Đầu vào:Người dùng bật Camera Roll lên

• Đầu ra: Ảnh đã được chọn