CHƯƠNG I: GIỚI THIỆU CHUNG Ở Việt Nam, các ứng dụng về xử ảnh đã bước đầu được triển khai trên một số lĩnh vực như lắp đặt hệ thống nhận dạng biển biển số xe ở các bãi đổ xe, hệ thống nh
Trang 1KHOA ĐA PHƯƠNG TIỆN
BỘ MÔN XỬ LÝ VÀ TRUYỀN THÔNG ĐA PHƯƠNG TIỆN
BÁO CÁO BÀI TẬP LỚN
Đề tài: Viết ứng dụng cơ bản xử lý ảnh màu
HÀ NỘI - 2022
Trang 2MỤC LỤC
LỜI CẢM ƠN 3
CHƯƠNG I: GIỚI THIỆU CHUNG 4
PHẦN 1: ĐẶT VẤN ĐỀ 4
Đề tài lựa chọn 4
Lý do chọn đề tài 4
Mục tiêu của đề tài 4
PHẦN 2: NỘI DUNG LIÊN QUAN 5
1 Các yêu cầu cơ bản 5
2 Ý tưởng 5
CHƯƠNG II: CHI TIẾT ĐỀ TÀI 5
Phần 1: Giao diện 5
1 Về ứng dụng Figma 6
2 Thiết kế giao diện 7
Phần 2: Lập trình ứng dụng 8
1 Về ngôn ngữ lập trình Python 8
2 Về thư viện đồ họa Tkinter 9
3 Về thư viện xử lí ảnh OpenCV, Numpy,… 10
CHƯƠNG III: KẾT QUẢ VÀ ĐÁNH GIÁ 12
Phần 1: Kết quả 12
I Giao diện 12
II Thuật toán 20
Phần 2: Tổng kết 25
LỜI KẾT 25
Trang 3CHƯƠNG I: GIỚI THIỆU CHUNG
Ở Việt Nam, các ứng dụng về xử ảnh đã bước đầu được triển khai trên một
số lĩnh vực như lắp đặt hệ thống nhận dạng biển biển số xe ở các bãi đổ xe, hệ thống nhận dạng vân tay chấm công ở các công sở… môn học xử lý ảnh ở các trường đại học được xem là môn học bắt buộc ở một số ngành như công nghệ thông tin, điện tử viễn thông…Tuy nhiên nhìn một cách khách quan thì số lượng các ứng dụng được triển khai trên thực tế là quá ít ỏi, lĩnh vực này sẽ còn phát triển mạnh mẽ trong tương lai nếu như được quan tâm một cách nghiêm túc
Xuất phát từ thực tế rằng môn học xử lý ảnh ở các trường đại học là một môn học mang nặng tính học thuật, khô khan, các vấn đề được mô tả dưới dạng toán học, sinh viên nắm bắt môn học một cách chung chung mà không đi vào bản chất vấn đề, ứng dụng thực tiễn của môn học, chúng em đã chọn đề tài này
để làm nghiên cứu cho bài tập của mình
Mục tiêu của đề tài
Nắm được một số kỹ thuật trong xử lý ảnh với Python và một số thuật toán thường được sử dụng
Vận dụng các nguyên tắc trong thiết kế để hoàn thiện giao diện, các nút chức năng của sản phẩm
Trang 4PHẦN 2: NỘI DUNG LIÊN QUAN
1 Các yêu cầu cơ bản
- Có giao diện, đầy đủ các phím tương tác
- Ứng dụng chỉnh sửa ảnh với các chức năng cơ bản đáp ứng nhu cầu người dùng
- Viết code bằng ngôn ngữ Python có sử dụng thư viện xử lý ảnh OpenCV, thư viện đồ họa Tkinter, thư viện xử lý dữ liệu dạng số Numpy
- Thiết kế giao diện bằng Figma
- Tên ứng dụng “Light Box” xuất phát từ hộp tối trong lịch sử nhiếp ảnh
CHƯƠNG II: CHI TIẾT ĐỀ TÀI
Phần 1: Giao diện
Trang 51 Về ứng dụng Figma
a) Giới thiệu
Figma là một công cụ thiết kế vector và thử nghiệm sản phẩm website, app Công cụ dựa trên nền tảng đám mây để người dùng có thể cộng tác trong các dự án và làm việc ở bất cứ đâu
b) Ưu điểm của Figma
- Tính tương thích: Figma hoạt động tương thích trên tất cả các hệ điều hành có trình duyệt web, từ Macs, Windows, Linux đến Chromebooks đều có thể dùng Figma Đây là công cụ design duy nhất có thể làm được điều này Tất cả mọi người đều có thể chia sẻ, mở và chỉnh sửa một file Figma dễ dàng dù đang dùng hệ máy nào
- Hỗ trợ làm việc nhóm hiệu quả: Figma là một công cụ browser-based,
do đó mọi người trong team có thể làm việc với nhau tương tự như làm việc trong Google Docs
- Chia sẻ file đơn giản: Một khi bạn chia sẻ file Figma qua việc gửi link cho người khác, người nhận link sẽ có khả năng truy cập vào file đó
- Hỗ trợ feedback tiện lợi: Figma hỗ trợ bình luận ngay trong app, cả trong chế độ design và prototyping
- Công cụ mà các developer yêu thích: Figma hiển thị code snippets cho từng đối tượng được chọn Code có thể hiển thị dưới dạng CSS, dành cho iOS hay Android Thay vì sử dụng các công cụ của bên thứ ba, developer có thể inspect (quan sát) đối tượng ngay trên file trong lúc xem thiết kế
- Tất cả mọi thứ được lưu trữ online: Mọi thiết kế của bạn đều đã được lưu trữ trên cloud Bạn sẽ không sợ mất file, hỏng máy hay các vấn đề không mong muốn khác
- File versioning: Figma tích hợp sẵn chức năng file versioning Chức năng này cho phép bạn lưu lại trang thái của file design bất kỳ lúc nào
- Prototype tích hợp sẵn: Với Figma, bạn không cần phải nhờ đến các công cụ hỗ trợ prototype như Invision hay Marvel
Trang 62 Thiết kế giao diện
a) Phong cách flat design
Ngày càng nhiều các trang web sử dụng đặc điểm của thiết kế phẳng, các ứng dụng trên điện thoại cũng rất ưa chuộng xu hướng này Với màn hình nhỏ, chỉ có vài nút chọn thì một thiết kế phẳng là lựa chọn khá dễ sử dụng
Những thiết kế phẳng sử dụng nhiều yếu tố giao diện đơn giản Như những nút, icon khác nhau, hình dạng đơn giản nhất Các đường bao quanh các chi tiết
đó sẽ có công dụng tạo nên góc cạnh, độ cong cho hình ảnh
Ưu điểm của việc này là những hình ảnh, biểu tượng đó rất dễ hiểu Không cần giải thích, nhà thiết kế có thể khiến người xem, người nhìn hiểu ngay được mong muốn của mình thông qua những chi tiết đó
b) Màu sắc:
Màu nâu trầm kết hợp màu cam mang đến sự trẻ trung, hiện đại, phù hợp với mọi người Để thêm phần tinh tế, sử dụng trắng và đen bổ trợ Tổng thể màu sắc rất hài hòa, thanh lịch
c) Typography
Roboto là một typeface sans-serif (chữ không chân) loại grotesque phát triển bởi Google Google miêu tả đây là một font chữ “hiện đại, dễ dàng tiếp cận” và “giàu xúc cảm” Roboto kết hợp giữa cơ chế hình học và các đường cong thân thiện giúp typeface mang tính tự nhiên hơn, đồng thời tạo cảm giác đọc rất tốt cho người dùng Chính vì vậy, Roboto ngày càng phổ biến trong thiết kế giao diện với 22 triệu website tin dùng
Trang 7Các ứng dụng của Python trong đời sống rất rộng và đa dạng, từ làm trang web, tạo nguyên mẫu phần mềm, game 2D tới ứng dụng trong trí tuệ nhân tạo, khoa học máy tính hay Internet vạn vật
b) Điểm mạnh:
- Cú pháp đơn giản: Nó khá giống với ngôn ngữ tự nhiên, dễ nhận biết
và thực hiện Ta hãy cùng so sánh 2 đoạn code thực hiện cùng một nhiệm vụ được biên soạn bằng ngôn ngữ Python và C++:
Trang 8cout <<"a + b = "<< a + b << endl;
return0;
}
- Không quá khắt khe: Ta không cần xác định kiểu dữ liệu của một biến trong Python, không nhất thiết phải thêm dấu phẩy vào cuối câu lệnh hay những dấu ngoặc nhọn Thêm việc khi học Python chỉ cần tuân theo các bài tập có sẵn, điều này giúp nhóm dễ học hơn
- Viết code ít hơn: Python cho phép viết chương trình có nhiều chức năng tốt hơn với ít dòng code hơn Nhờ các yếu tố như cú pháp đơn giản, ít khắt khe, số lượng dòng cũng được cắt giảm bớt so với các ngôn ngữ khác
- Ngoài ra những khả năng mở rộng của Python cũng rất mạnh mẽ và tạo
b) Điểm mạnh:
- Việc tạo ứng dụng sử dụng Tkinter khá đơn giản, dễ dàng và thuận tiện với các bước:
+ Nhập mô đun Tkinter
+ Tạo cửa sổ ứng dụng chính của GUI
+ Thêm một vài widgets vào ứng dụng GUI
+ Nhập vòng lặp event chính để thực hiện hành động với từng sự kiện
do người dùng kích hoạt
- Cung cấp nhiều bảng điều khiển khác nhau: được sử dụng trong một ứng dụng GUI như các nút, nhãn và hộp kiểm, Những bảng điều khiển này thường được gọi là widget
- Thư viện tiêu chuẩn cho Python: Tkinter không cần phải cài đặt thêm các thư viện ngoài nên sử dụng rất tiện lợi và nhẹ nhàng
- Thiết kế giao diện: kết hợp với Python sẽ ra một giao diện đơn giản để hiển thị, dễ dàng với người dùng thao tác cần các phím chức năng
Trang 9- Là nền tảng nhúng, giá thành rẻ: các thiết bị đầu cuối khi chạy các giao diện sẽ mất về bản quyền nên cần Python kết họp với Tkinter để chạy trên nền Linux đơn giản
3 Về thư viện xử lí ảnh OpenCV, Numpy,…
Trong Python có rất nhiều thư viện quan trọng trong khoa học máy tính như: OpneCV, Numpy,…
A Thư viện OpenCV
a Giới thiệu
- Open Computer Vision viết tắt là OpenCV là một thư viện cung cấp các hàm thư viện cho các bài toán xử lý ảnh và thị giác máy tính hoàn toàn miễn phí cho cả mục đích giáo dục và thương mại
- OpenCV là công cụ cho phép viết các ứng dụng của xử lý ảnh OpenCV cung cấp giao diện để có thể lập trình với C/C++/C#, Java, Python, Matlab trên các hệ điều hành Windows, Linux và Android
- Các phiên bản của OpenCV được biên dịch và chạy trên visual studio, examples trong học phần có thể được biên dịch với phiên bản opencv 2.4.9 và visual studio 2010
b Ưu điểm
- Các thuật toán rộng: hơn 500 hàm và hơn 2500 các thuật toán đã được tối ưu về xử lý ảnh, và các vấn đề liên quan tới thị giác máy
tối đa sức mạnh của các dòng chip đa lõi… để thực hiện các phép tính toán trong thời gian thực, nghĩa là tốc độ đáp ứng của nó có thể
đủ nhanh cho các ứng dụng thông thường Tích hợp hiệu suất nhanh
và hỗ trợ đa ngôn ngữ, phù hợp với mọi lập trình viên
- Sử dụng rộng rãi: Các doanh nghiệp lớn như IBM, Google, Toyota hoặc các doanh nghiệp Startup đều lựa chọn OpenCV cho một số hoạt động trong công việc của họ
c Hạn chế
- Các thư viện chỉ hỗ trợ một tính năng cụ thể và duy nhất cho một công việc của người dùng Đây là điểm hạn chế của OpenCV khi các công cụ hiện nay luôn ưu tiên cho việc đa dạng hóa các tính năng, giúp người thuận tiện hơn trong việc phát triển
B Thư viện Numpy:
Trang 10cấp khả năng quản lý mảng cực kỳ vượt trội Nhanh chóng, vượt trội, hiệu quả là những gì mà mọi người được trải nghiệm với Numpy
- Là thư viện hỗ trợ cho việc tính toán các mảng đa dạng Numpy rất hữu ích với những hàm liên quan đến Đại Số Tuyến Tính
b Khả năng của Numpy
- Numpy là một mô-đun mở rộng mã nguồn mở cho Python, cung cấp các chức năng biên dịch nhanh cho các thao tác toán học và số, thậm chí là với những ma trận và mảng có lượng dữ liệu khổng lồ Bên cạnh đó các mô-đun cung cấp một thư viện lớn các chức năng toán học cấp cao để hoạt động trên các ma trận và mảng một cách dễ dàng
và thuận tiện
- Numpy cung cấp những masked arrays đồng thời với mảng gốc Nó cũng đi kèm với các chức năng như thao tác với hình dạng logic, biến đổi Fourier rời rạc, đại số tuyến tính tổng quát, và nhiều hơn nữa
- Mỗi khi bạn thay đổi đặc điểm của bất kỳ mảng N chiều nào, Numpy
sẽ tạo các mảng mới cho mảng đó và xóa các mảng cũ
- Gói mô-đun này cung cấp các công cụ hữu ích để tích hợp với các ngôn ngữ lập trình khác Chẳng hạn như C, C++, và ngôn ngữ lập trình Fortran
- Numpy cung cấp các chức năng tương đương với MATLAB Cả hai đều cho phép người dùng thao tác nhanh hơn
Trang 11CHƯƠNG III: KẾT QUẢ VÀ ĐÁNH GIÁ
Trang 13Nút Dowload: sau khi đã chỉnh xong và áp dụng những thay đổi lên bức ảnh, người dùng có thể nhấn nút này để tải ảnh về máy tính
b Menu chính:
Gồm các chức năng: Cắt và xoay, Chỉnh độ sáng, độ tương phản, Tách 3 kênh màu (R, G, B), Bộ lọc màu
c Menu mở rộng
Với mỗi chức năng trong Main menu sẽ có những chức năng phụ
Khi nhấn chọn 1 nút trong thanh Main menu, cửa sổ mở rộng sẽ hiển thị chuyển động từ phải sang
Trang 17Bộ lọc Black & White
- Bộ lọc Black & White: mọi màu sắc trong ảnh sẽ bị giảm độ bão hòa và ảnh thành màu đen trắng, hay đúng hơn là ảnh xám
Bộ lọc Sketch
- Bộ lọc Sketch: tạo hiệu ứng vẽ phác thảo cho ảnh
Trang 19II Thuật toán
1 Đọc ảnh
- Ban đầu, nhóm em thực hiện thuật toán truy cập vào trình duyệt file và sử dụng hàm đọc ảnh cơ bản của thư viện OpenCV đó là ‘cv2.imread’, nhưng đã xảy ra một vấn đề đó là hàm này không thể đọc các file ảnh mà trong đường dẫn tới thư mục chứa file hay tên file có kí tự Unicode
VD: “D:\Học tập\Xử lí ảnh\Ảnh test.png”
Việc này sẽ khiến khu vực hiển thị ảnh không có giá trị hiển thị nào và nó chỉ xuất hiện màu xám ban đầu
Vì vậy, nhóm em đã nghiên cứu cách khắc phục Thay vì ‘cv2.imread’, hàm
‘cv2.imdecode’ sẽ hiệu quả nhất, không còn xảy ra lỗi hiển thị ảnh
def chon_anh( self ):
self image_zone.delete( "all" )
self filename = filedialog.askopenfilename( title = 'Choose Image' ,
self original_image = cv2.imdecode(np.fromfile( self filename ,
self edited_image = cv2.imdecode(np.fromfile( self filename ,
self filtered_image = cv2.imdecode(np.fromfile( self filename ,
self hien_thi_anh( self edited_image)
self show_frame( self editing)
2 Hiển thị ảnh
- Sau khi đã đọc được ảnh, file ảnh lúc này được hiểu dưới dạng số, ma trận, bình thường để hiển thị ảnh, chúng ta sẽ dùng hàm ‘cv2.show’, ảnh sẽ nằm trong một cửa sổ mới pop-up lên màn hình, đây không phải điều mà nhóm em mong muốn
Từ đó, nhóm đã tham khảo và tìm ra phương pháp sử dụng ‘tk.canvas’ để làm khu vực hiển thị ảnh Về cơ bản, khu vực hiển thị ảnh là một ‘canvas’ với kích thước giới hạn 646x434, nằm trong cửa sổ chỉnh sửa ảnh Sau khi ta có dữ liệu về ảnh, việc cần làm là tái thiết lập kích cỡ của ảnh Công thức để điều chỉnh lại kích thước ảnh khá rắc rối và cồng kềnh khiến nhóm gặp một vài lỗi khi ảnh đưa ra chưa đúng với kì vọng Nhưng các lỗi này đã đều được khắc phục ở sản phẩm cuối
Trang 20Tiếp đến, dữ liệu số của ảnh sẽ được xử lý và chuyển đổi thành ảnh có thể hiển thị được trên giao diện Sử dụng hàm ‘canvas.create’ để đưa ảnh lên màn hình giao diện app
def hien_thi_anh( self , image= None ):
self image_zone.delete( "all" )
if image is None :
image = self edited_image()
else :
image = image
image = cv2.cvtColor(image , cv2.COLOR_BGR2RGB)
height , width , channels = image.shape
ratio = width / height
self new_width = width
self new_height = height
self new_width = int ( 434 * ratio)
self ratio = height / self new_height
self new_image = cv2.resize(image , ( self new_width+ 1 ,
self new_height+ 1 ))
self new_image = ImageTk.PhotoImage(Image.fromarray( self new_image)) self image_zone.config( width = self new_width , height = self new_height) self image_zone.place( x 438 - self new_width/ 2 , y 280 - self new_height/ 2 ) self image_zone.create_image(
self new_width/ 2 , self new_height/ 2 , image = self new_image)
3 Lật, xoay ảnh
- Chủ yếu là nhóm em sử dụng các hàm có sẵn trong thư viện OpenCV để tạo nên các chức năng này Nhưng về lý thuyết chỉ là ta thực hiện việc thay đổi tọa
độ điểm ảnh
def rotate_left( self ):
self filtered_image = cv2.rotate(
self filtered_image , cv2.ROTATE_90_COUNTERCLOCKWISE)
self hien_thi_anh( self filtered_image)
def rotate_right( self ):
self filtered_image = cv2.rotate(
self filtered_image , cv2.ROTATE_90_CLOCKWISE)
self hien_thi_anh( self filtered_image)
def vertical_action( self ):
self filtered_image = cv2.flip( self filtered_image , 0 )
self hien_thi_anh( self filtered_image)
def horizontal_action( self ):
Trang 21‘cv2.add’ Ta soát lại thử, nếu giá trị V tại một điểm ảnh đã tăng hoặc giảm quá khoảng [0,255] thì gán lại giá trị 0 hoặc 255 cho nó Cuối cùng sau khi gộp 3 giá trị và chuyển hệ màu, ta thu được ảnh sản phẩm với độ sáng thay đổi và hiển thị nó lên giao diện
Điểm hạn chế của phương pháp này đó là làm màu sắc của ảnh bị thay đổi mạnh do tác động tới giá trị màu của điểm ảnh
+ Thế nên, phương pháp hiệu quả hơn được nhóm sử dụng là thay đổi cả
3 giá trị R,G,B trong hệ màu RGB: cũng tương tự như cách trên, ta tách ra 3 kênh màu R,G,B và thực hiện tăng giảm cả 3 giá trị, soát lại giá trị có vượt quá hay không
def brightness( self , event ):
value = self bri_scale.get()
rgb = cv2.cvtColor( self edited_image , cv2.COLOR_BGR2RGB)
self filtered_image = cv2.cvtColor(final_rgb , cv2.COLOR_RGB2BGR)
self hien_thi_anh( self filtered_image)