XỬ lý ẢNH dò mực nước, có CODE

XỬ LÝ ẢNH DỊ MỰC NƯỚC
CĨ CODE


MỤC LỤC
CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI.......................................................................................................1
1.1 Giới thiệu về đề tài.................................................................................................................................1
1.2 Mục đích nghiên cứu..............................................................................................................................4
1.3 Đối tượng nghiên cứu............................................................................................................................4
1.4 Phạm vi nghiên cứu................................................................................................................................7
1.5 Dự kiến kết quả......................................................................................................................................7
CHƯƠNG 2: CƠ SỞ LÝ THUYẾT................................................................................................................8
2.1 Tổng quan...............................................................................................................................................8
2.2 Công cụ ffmpeg.....................................................................................................................................12
2.3 Các bước xử lý ảnh...............................................................................................................................13
2.2.1 Thu nhận hình ảnh........................................................................................................................13
2.2.2 Tiền xử lý.......................................................................................................................................13
2.2.3 Phân vùng ảnh (ROI).....................................................................................................................14
2.2.4 Lọc nhiễu.......................................................................................................................................16
CHƯƠNG 3: THIẾT KẾ VÀ THI CÔNG.....................................................................................................17
3.1 Sơ đồ khối của hệ thống......................................................................................................................17
3.1.1 Khối dữ liệu video.........................................................................................................................17
3.1.2 Khối Node-RED..............................................................................................................................17
3.2 Thiết kế giao diện.................................................................................................................................17
CHƯƠNG 4: GIẢI THUẬT VÀ ĐIỀU KHIỂN...........................................................................................22
4.1 Hoạt động của hệ thống.......................................................................................................................22
4.2 Lưu đồ giải thuật..................................................................................................................................24
CHƯƠNG 5: THỰC NGHIỆM.....................................................................................................................26
5.1 Tiến hành thực nghiệm........................................................................................................................26
5.2 Kết quả thực nghiệm............................................................................................................................29
5.3 Kết luận thực nghiệm...........................................................................................................................31

CHƯƠNG 6: KẾT LUẬN..............................................................................................................................32
6.1 Ưu điểm................................................................................................................................................32
6.2 Nhược điểm..........................................................................................................................................32
6.3 Hướng phát triển..................................................................................................................................32

2


TÀI LIỆU THAM KHẢO..............................................................................................................................33

MỤC LỤC HÌNH ẢNH
Hình 1.1: Giao diện Adobe Photoshop CS6.......................................................................1
Hình 1.2 Ứng dụng xử lý ảnh trong nhận diện biển số xe..................................................2
Hình 1.3: Cơng nghệ tự lái trên ơ tơ...................................................................................3
Hình 1.4: Ứng dụng xử lý ảnh trong nhận diện dâu chín...................................................3
Hình 1.5: Cơng cụ lập trình Node-RED.............................................................................4
Hình 1.6: Ngơn ngữ HMTL...............................................................................................5
Hình 1.7: Ngơn ngữ CSS....................................................................................................6
Hình 1.8: Ngơn ngữ JavaScript..........................................................................................6
Hình 2.1: Ứng dụng của xử lý ảnh (Nguồn )......................................................................8
Hình 2.2: Nén ảnh..............................................................................................................9
Hình 2.3: Hệ màu Cyan, Magenta, Yellow, Black (CMYK)...............................................9
Hình 2.4: Minh họa về mật độ điểm ảnh..........................................................................10
Hình 2.5: Các loại ảnh......................................................................................................11
Hình 2.6: Quá trình hoạt động của ffmpeg.......................................................................13
Hình 2.7: Bước tiền xử lý.................................................................................................14
Hình 2.8: Áp dụng threshold lọc một phần nhiễu.............................................................14
Hình 2.9: Vùng ROI.........................................................................................................15
Hình 2.10: Lọc nhiễu........................................................................................................16
Hình 3.1: Giao diện chỉnh sửa của một khối input/ output...............................................18

Hình 3.2: Khối output......................................................................................................18
Hình 3.3: Khối input/ output............................................................................................19
Hình 3.4: Khối xử lý........................................................................................................19
Hình 3.5: Thay đổi vị trí các Tab, Group..........................................................................20
Hình 3.6: Giao diện chỉnh sửa vị trí.................................................................................20
Hình 3.7: Giao diện chỉnh sửa vị trí của dashboard..........................................................20
Hình 3.8: Giao diện dashboard.........................................................................................21
Hình 5.1: Tồn bộ chương trình của hệ thống..................................................................26
Hình 5.2: Nhập các thơng số vào.....................................................................................27
Hình 5.3: Nhấn Submit....................................................................................................27
Hình 5.4: Nhấn Bắt đầu....................................................................................................28
Hình 5.5: Nhấn dừng lại...................................................................................................28
Hình 5.6: Nhấn kết thúc...................................................................................................29
Hình 5.7: Kết quả thực nghiệm........................................................................................29
Hình 5.8: Nhiễu do chất lượng video...............................................................................30
Hình 5.9: Nhiễu do chọn ROI..........................................................................................30
3


CÁC CHỮ VIẾT TẮT
ROI – Region of Interest
HTML: HyperText Markup Language
CSS: Cascading Style Sheets
RGB: Red Green Blue
CMYK: Cyan Magenta Yellow blacK
DPI: Dots Per Inch

4

5


Trang 6/33

CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI
1.1 Giới thiệu về đề tài
Hiện này lĩnh vực xử lý ảnh đã và đang phát triển mạnh mẽ trong nhiều lĩnh vực
đặc biệt là trong lĩnh vực công nghệ, bên cạnh những cảm biến được dùng trong tự động
hóa như cảm biến nhiệt độ, cảm biến loadcell, cảm biến siêu âm, … Thì xử lý ảnh cũng
đang có mức độ áp dụng cao trong lĩnh vực này, nó đem lại hiệu quả chính xác rất cao.
Trong giải trí thì xử lý ảnh được dùng trong các app dùng để thêm các hiệu ứng bắt mắt,
trong các ứng dụng chỉnh sửa hình ảnh, video, …
Ví dụ như app Adobe Photoshop CS6 đã được lập trình sẵn các chức năng để người
dùng có thể sử dụng.

Hình 1.1: Giao diện Adobe Photoshop CS6

Trong lĩnh vực an ninh thì xử lý ảnh dùng trong việc nhận diện biển số xe.


Trang 7/33

Hình 1.2 Ứng dụng xử lý ảnh trong nhận diện biển số xe
Đối với lĩnh vực cơng nghệ thì xe điện của hãng Tesla đã ứng dụng mạnh mẽ xử lý
ảnh vào sản phẩm của họ với chế độ tự lái


Trang 8/33
Hình 1.3: Cơng nghệ tự lái trên ơ tơ

Xử lý ảnh cịn có thể áp dụng trong chăn ni, trồng trọt, … Việc áp dụng xử lý ảnh
trong trồng trọt thì sẽ giúp người nơng dân quản lý trang trại một cách toàn diện để kịp
thời đưa ra các giải pháp cho cây trồng.

Hình 1.4: Ứng dụng xử lý ảnh trong nhận diện dâu chín
Để có thể đo mực nước thì có thể dùng nhiều cảm biến như cảm biến mức, cảm biến
áp suất thủy tĩnh, cảm biến siêu âm, … nhưng những loại cảm biến này có tồn tại 1 sai số
nhất định mà các ứng dụng cần độ chính xác rất cao thì khó có thể đáp ứng thì lúc này
ứng dụng xử lý ảnh vào để đo mực nước là một giải pháp.

1.2 Mục đích nghiên cứu
Tìm hiểu về cơng nghệ xử lý ảnh.
Tìm hiểu về ngơn ngữ lập trình Javascript và thư viện xử lý ảnh Jimp trên Nodejs.
Tìm hiểu về ffmpeg trong việc phân tách ảnh từ video.
Tạo ra một chương trình sử dụng xử lý ảnh để đo mực nước có trong bồn với độ
chính xác cao. Thiết kế giao diện dashboard để có thể thao tác dễ dàng mà khơng cần can
thiệp nhiều vào chương trình chính.

1.3 Đối tượng nghiên cứu
 Cơng cụ lập trình Node-RED.


Trang 9/33

Hình 1.5: Cơng cụ lập trình Node-RED
 Ngơn ngữ lập trình Javascript
HTML(HyperText Markup Language): Là ngơn ngữ lập trình dùng để xây dựng nội
dung và cấu trúc trên wedsite.

Hình 1.6: Ngôn ngữ HMTL

CSS(Cascading Style Sheets): Là ngôn ngữ dùng để định dạng các thẻ HTML như
cỡ chữ, màu sắc, căn lề,…


Trang 10/33

Hình 1.7: Ngơn ngữ CSS
Javascript: Là ngơn ngữ để xử lý các input/output thông tin được hiển thị trên
wedsite, nguồn dữ liệu được lưu trữ ở database đảm bảo sự tương tác giữa người dùng và
wedsite.

Hình 1.8: Ngơn ngữ JavaScript
Ngồi Javasript thì cịn có các ngơn ngữ Python, C++ và một số ngơn ngữ ít phổ
biến khác. Mỗi ngơn ngữ đều có ưu và nhược điểm riêng.


Trang 11/33
 Ưu và nhược điểm của JS:
o Ưu điểm
- Khơng cần trình biên dịch( Compiler) vì wed browser sẽ biên dịch nó
-

bằng HTML. Trong khi Python và C++ đều cần trình biên dịch.
Dễ bắt đầu học so với các ngôn ngữ khác một phần nhờ vào việc là một

trong số ngôn ngữ phổ biến nhất với kho gihub chứa rất rất nhiều code.
- Có thể hoạt động trên trình duyệt khác nhau.
- Có thể kiểm tra dữ liệu trong database thơng qua
o Nhược điểm:
- Dễ bị khai thác

- Có thể dùng để thực thi mã độc trên máy tính người dùng.
- Số lượng JS code snippets lớn.
 Xử lý ảnh dùng ngôn ngữ Javascript.

1.4 Phạm vi nghiên cứu
Dùng trong các ứng dụng cần biết chính xác mực nước trong bình.

1.5 Dự kiến kết quả
Đo được mực nước có trong bình có độ chính xác cao.
Giao diện và người dùng có thể tương tác


Trang 12/33

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT
2.1 Tổng quan
Hiện nay xử lý ảnh là phần ngành khoa học rất phát triển trong những năm gần đây,
xử lý ảnh tiếp nhận để xử lý hoặc nâng cao chất lượng từ các nguồn dữ liệu như các thiết
bị như camera, wedcam hoặc cũng có thể là hình ảnh hoặc video.
Từ những u cầu của ứng dụng thực tế mà xử lý ảnh có nhiều phương pháp khác
nhau như phân tích ảnh hoặc nâng cao chất lượng ảnh.

Hình 2.1: Ứng dụng của xử lý ảnh (Nguồn )
Ngoài những ứng dụng xử lý hay nâng cao chất lượng ảnh thì cịn có những ứng
dụng như nén ảnh, lọc nhiễu, xử lý màu sắc ảnh,..


Trang 13/33

Hình 2.2: Nén ảnh

Khơng gian màu RGB là tổ hợp 3 màu Red, Green và Blue. Hầu hết các màu khác
thực chất được tạo thành từ tổ hợp màu RGB. Ngồi khơng gian màu RGB thì cịn các
khơng gian màu khác như CMYK, …
Ngồi ra cịn mơ hình HIS (Hue, Saturation, Intensity) đại diện cho 3 đại lượng:
Hue ( màu sắc), Saturation( độ tinh khiết) và Intensity( độ sáng).

Hình 2.3: Hệ màu Cyan, Magenta, Yellow, Black (CMYK)
Các màu sắc được là được pha trộn từ các thành phần cơ bản RGB như:
Màu đỏ sẽ gồm : 1Red + 0Green + 0Blue
Màu Cyan sẽ gồm : 0Red + 1Green + 1Blue
Màu đen: 0Red + 0Green + 0Blue
Màu trắng: 1Red + 1 Green + 1Blue
Màu xám thường sẽ là 0.5Red + 0.5 Green + 0.5Blue


Trang 14/33
Phân loại ảnh gồm:
Ảnh kĩ thuật số (hay ảnh số) là tập hợp các điểm ảnh hữu hạn theo trục f(x;y). Mức
xám sẽ biểu diễn cho giá trị tại điểm đó, mức xám phổ biến là 1byte tương ứng từ 0 đến
255.
Pixel là đơn vị của điểm ảnh.
Mật độ điểm ảnh ( Dots Per Inch) là số lượng pixel có trong 1 đơn vị Inch, thơng
thường một bức ảnh rõ nét sẽ có thể phụ thuộc nhiều vào DPI do nếu một bức ảnh dù có
độ phân giải cao nhưng được hiển thị lên 1 kích thướt to lớn thì sẽ khơng cịn đươc sắc
nét. Ví dụ nhưng phóng to 1 vùng trong bức ảnh, mật độ điểm ảnh DPI sẽ vẫn giữ nguyên
trong khi kích thướt đã được tăng lên.

Hình 2.4: Minh họa về mật độ điểm ảnh
Trong ảnh kĩ thuật số thì sẽ các các loại phổ biến:
Một giá trị trên điểm ( Back & White hoặc là Grayscale)

Ba giá trị trên điểm ( Red, Green, Blue)
Bốn giá trị trên điểm (Red, Green, Blue và Alpha)


Trang 15/33

Hình 2.5: Các loại ảnh
Ảnh nhị phân: Là loại ảnh mà chỉ có 2 mức màu là trắng và đen, có 2 giá trị đại diện
cho 2 mức màu đó, mức 0 đại diện cho màu đen, mức 1 đại diện cho màu trắng. Sử dụng
1 bit dữ liệu để biểu diễn 1 mức. Ví dụ hình ảnh bàn cơ vua 8x8, mỗi ô là sẽ màu trắng
hoặc đen, giả sử mỗi ơ là 1 giá trị thì có 64 giá trị tương ứng với 6bits (2^6). Như vậy sẽ
dùng 6bits để biểu diễn hình bàn cờ vua.
Ảnh đen trắng: Là ảnh chỉ có 2 màu trắng và đen và mức xám sẽ biểu diễn hình ảnh
này.
Ảnh màu: Là ảnh kết hợp 3 màu cơ bản là Đỏ, Xanh lá và Xanh da trời (Red –
Green –Blue) lại với nhau để tạo ra rất nhiều màu làm cho hình ảnh thêm sinh động,
thường dùng 3 byte để biểu diễn tức có khoảng 16,7 triệu màu.

2.2 Cơng cụ ffmpeg
Phần mềm FFmpeg là xử lý, audio, video đơn giản được hoạt động trên nhiều nền
tảng như Linux, MacOS, Microsoft Windows,… và trên nhiều môi trường khác.


Trang 16/33
FFmpeg cung cấp các công cụ như:
Công cụ ffmpeg: Chuyển đổi định dạng tệp tin.
Công cụ ffserver: Server cho việc streaming.
Cơng cụ ffplay: Chương trình đơn giản giúp cho việc phát video từ thư viện SDL và
ffmpeg.
Các gói thư viện của FFmpeg gồm:

 Libavutil: Thư viện chứa các hàm cho việc đơn giản chương trình.
 Libavcodec: Thư viện chứa bộ mã hóa và giải mã cho audio và video.
 libavformat: thư viên chưa bộ phân kênh và ghép kênh cho những định dạng
đa phương tiện.
 libavdevice: thư viện chứa những thiết bị đầu vào và đầu ra
 libavfilter: thư viện chứa bộ lọc
 libswscale: thư viện cho việc tối ưu ảnh
libswresample: thư viện cho việc tối ưu việc lấy mẫu lại video.
 Quá trình hoạt động của ffmpeg:
Đầu tiên công cụ ffmpeg sẽ gọi thư viện libavformat để đọc các tệp đầu vào bằng bộ
phân kênh và nhận các dữ liệu được mã hóa từ chúng. Các dữ liệu được mã hóa sau đó
được chuyển đến bộ giải mã. Bộ giải mã tạo ra các frame ảnh không nén như video thơ,
ảnh theo định dạng jpg. Sau đó các frame ảnh được chuyển đến bộ mã hóa để mã hóa và
xuất ra dữ liệu đã được mã hóa. Cuối cùng, dữ liệu mã hóa đó được chuyển đến bộ ghép
kênh và mã hóa chúng vào định dạng đầu ra.


Trang 17/33

Hình 2.6: Quá trình hoạt động của ffmpeg

2.3 Các bước xử lý ảnh
Xử lý ảnh là nhận ảnh đầu vào là một ảnh thực sau đó chuyển thành ảnh kĩ thuật số
từ đó có thể biết được tồn bộ giá trị trong ảnh sau đó có thể chuyển đổi theo mục tiêu cụ
thể để cho một bức ảnh đầu ra theo mong muốn của chúng ta, hoặc có thể xử dụng những
giá trị trong bức ảnh để tính tốn theo yêu cầu của chúng ta.

2.2.1 Thu nhận hình ảnh
Dữ liệu sẽ được thu nhận vào thông thường qua các thiết bị như wedcam, camera,
video,… sau đó sẽ được tách từng ảnh có trong video đó để đảm bảo đầu vào(input) là dữ

liệu hình ảnh.
Hình ảnh sau khi thu nhập sẽ bắt đầu vào bước tiền xử lý.

2.2.2 Tiền xử lý
Sau khi đã thu nhận dữ liệu hình ảnh thì sẽ được chuyển sang ảnh xám
(greyscale).Sau khi đã chuyển sang ảnh xám thì sẽ tách biên. Biên của đối tượng được
phát hiện bằng sự thay đổi đột ngột về mức xám.


Trang 18/33

Hình 2.7: Bước tiền xử lý
Mục đích là lấy ra các mức xám thường có giá trị từ 0 đến 255. Sau đó là thiết lập
ngưỡng threshold vào ảnh xám, mục đích là loại bỏ đi các chi tiết thừa chúng ta khơng
quan tâm.

Hình 2.8: Áp dụng threshold lọc một phần nhiễu
Từ đây đã có thể dùng ảnh này để xử lý những giai đoạn tiếp theo.

2.2.3 Phân vùng ảnh (ROI)
Vùng quan tâm (Region Of Interest) là vùng ảnh chúng ta chọn để xử lý còn những
vùng khác sẽ được bỏ qua. Thông thường để xử lý một bức ảnh sẽ tách riêng đối tượng
đó ra để xử lý, những phần cịn lại chúng ta khơng cần nên sẽ được bỏ qua. Việc xử lý


Trang 19/33
một tấm ảnh nhỏ hơn sẽ khiến chúng ta sẽ xử lý hơn là một tấm ảnh lớn, ngoài ra việc
này còn giúp nâng cao hiệu suất của máy tính xử lý hơn.

Hình 2.9: Vùng ROI

2.2.4 Lọc nhiễu
Hình ảnh đã được lọc nhiễu lần 1 do thiết lặp ngưỡng threshold loại bỏ đi phần lớn
các nhiễu và sau đó đã lọc vùng ROI lại nhưng vẫn còn một số nhiễu tồn tại trong ảnh sau


Trang 20/33
khi ROI, lúc này cần trải qua lọc nhiễu lần 2 loại bỏ toàn bộ nhiễu trước khi vào giai đoạn
tính tốn.

Hình 2.10: Lọc nhiễu

CHƯƠNG 3: THIẾT KẾ VÀ THI CÔNG
3.1 Sơ đồ khối của hệ thống

Dữ liệu video

NODE-RED


Trang 21/33

3.1.1 Khối dữ liệu video
Dữ liệu đầu là dạng video được truyền vào chương trình bằng cách nhập đường
link liên kết có thể đã lưu trong bộ nhớ máy tính ( Ví dụ: D:\d.mp4), hoặc cũng có thể là
đường link online.

3.1.2 Khối Node-RED
Khối Node-RED đóng vai trị làm bộ xử lý trung tâm

3.2 Thiết kế giao diện
Giao diện của node-red (hay còn gọi là dashboard - UI) được xây dựng bằng các
tab và group. Tab chính là tồn bộ giao diện hiển thị, còn group được hiển thị theo chiều
thẳng từ trên xuống dưới. Ví dụ như hình bên dưới theo cấu trúc là [Tab] Group.


Trang 22/33
Hình 3.1: Giao diện chỉnh sửa của một khối input/ output
Các khối sẽ đóng vai trị là một chức năng, đối với các khối được dùng để hiển thị
hoặc có chức năng input/output thì sẽ được gán [Tab] Group, cịn các khối xử lý thì sẽ
khơng gán. Các khối hiển thị khơng gửi giá input:

Hình 3.2: Khối output

Các khối hiển thị có gửi giá trị input

Hình 3.3: Khối input/ output
Các khối xử lý


Trang 23/33

Hình 3.4: Khối xử lý
Group sẽ có thơng số là độ rộng của nó, đều này là để giới hạn độ rộng của các khối
hiển thị.
Các khối node sẽ có thơng số là chiều dài và chiều rộng để hiển thị trên dashboard,
chiều rộng sẽ được giới hạn bởi Group của nó và chiều dài thì có thể thay đổi. Bên canh
đó thì cũng có chức năng Auto, nó sẽ giúp cho các khối được hiển thị tự động.
Vị trí của các group sẽ xuất hiện từ trái qua phải, nếu vượt quá tỉ lệ hiển thị thì sẽ
hiển thị từ trên xuống dưới. Có thể thay đổi vị trí của các Group.

Hình 3.5: Thay đổi vị trí các Tab, Group
Có thể thay đổi vị trí của các khối hiển thị ở dashboard bằng cách vào layout và di
chuyển các khối.


Trang 24/33
Hình 3.6: Giao diện chỉnh sửa vị trí

Hình 3.7: Giao diện chỉnh sửa vị trí của dashboard
Vị trí hiển thị ở dashboard của các group và khối sẽ đươc hiển thị giống như đã
được thiết kế ở Node-RED.

Hình 3.8: Giao diện dashboard


Trang 25/33

CHƯƠNG 4: GIẢI THUẬT VÀ ĐIỀU KHIỂN
4.1 Hoạt động của hệ thống
Lập trình chương trình xử lý ảnh dị mực nước, chúng ta cần truyền dữ liệu vào, dữ
liệu có thể là wedcam, camera hoặc video, ... Ở đây chúng ta sử dụng 1 video để truyền
vào chương trình. Sau khi hệ thống nhận được dữ liệu chúng ta truyền vào module
ffmpeg sẽ tách frame ảnh trong video ra và lần lượt truyền vào bộ xử lý, đảm bảo đầu vào
là dữ liệu hình ảnh. Ngồi dữ liệu video truyền vào thì cần có các thơng số như, vị trí bắt
đầu ROI( x và y), chiều rộng, chiều cao,frame_min, frame_max. Khi mới bắt đầu những
dữ liệu mới như video mới, vị trí lắp đặt mới, thì cần dị thử các thơng số này sao cho bộ
xử lý có thể xử lý chính xác nhất, sau khi đã chương trình đã nhận đầy đủ thơng số thì sẽ
bắt đầu hoạt động. Bộ xử lý sẽ tính tốn dựa trên các thơng số và dữ liệu dạng ảnh.
Cách tính tốn như sau:

Số mức nước trên mỗi đơn vị pixel = Khoảng cách thực tế của 2 vạch thướt /
Khoảng cách của 2 vạch thướt theo đơn vị pixel
Số lượng pixel nước được tính bằng chiều dài của mực nước