XÂY DỰNG WEBSITE QUẢN lý ẢNH cá NHÂN TRỰC TUYẾN

ĐẠI HỌC QUỐC GIA HÀ NỘI
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ
Mai Văn Dũng
XÂY DỰNG WEBSITE QUẢN LÝ ẢNH CÁ NHÂN
TRỰC TUYẾN
KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY
Ngành: Công nghệ thông tin
HÀ NỘI - 2013
ĐẠI HỌC QUỐC GIA HÀ NỘI
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ
Mai Văn Dũng
XÂY DỰNG WEBSITE QUẢN LÝ ẢNH CÁ NHÂN
TRỰC TUYẾN
KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY
Ngành: Công nghệ thông tin
Cán bộ hướng dẫn: ThS. Hồ Đắc Phương
LỜI CẢM ƠN
Trước tiên tôi xin gửi lời cảm ơn tới toàn thể quý thầy cô trong trường đại học công
nghệ - đại học quốc gia Hà Nội đã dạy dỗ và truyền đạt kiến thức quý báu cho tôi
trong bốn năm học tập và rèn luyện ở trường.
Tôi xin cảm ơn thạc sỹ Hồ Đắc Phương, người đã tận tình hướng dẫn và chỉ bảo trong
suốt quá trình thực hiện khóa luận tốt nghiệp này.
Và tôi cũng muốn gửi lời cảm ơn tới gia đình, bạn bè, người thân những người luôn ở
bên động viên trong suốt quá trình học tập, nghiên cứu cũng như hoàn thành khóa luận
tốt nghiệp.
Khóa luận đạt được một số kết quả nhất định, tuy nhiên trong thời gian thực hiện khóa
luận là có hạn nên không thể tránh khỏi sai sót và hạn chế. Kính mong nhận được sự
thông cảm và đóng góp ý kiến từ quý thầy cô và các bạn.
Hà Nội, ngày 13 tháng 5 năm 2013
Sinh viên
Dũng

Mai Văn Dũng
XÂY DỰNG WEBSITE QUẢN LÝ ẢNH CÁ NHÂN TRỰC TUYẾN
Mai Văn Dũng
Khóa QH-2009-I/CQ, ngành Công Nghệ Thông Tin
Tóm tắt Khóa luận tốt nghiệp:
Ngày nay, sự bùng nổ của công nghệ đã tạo ra những thiết bị chụp ảnh di động hay
những máy ảnh du lịch, thậm chí những chiếc điện thoại thông thường cũng được tích
hợp khả năng chụp ảnh. Mỗi người có thể chụp ảnh hằng ngày, hãy tưởng tượng sau
một thời gian, số lượng ảnh đó tăng lên đáng kể, ta không thể tìm lại được một hình
ảnh đẹp mà ta đã chụp trước đó, hoặc ta muốn chia sẻ một hình ảnh đẹp mới chụp, khi
đó là lúc chúng ta nghĩ tới một website chia sẻ và quản lý ảnh trực tuyến. Trong nội
dung khóa luận này sẽ trình bày một website quản lý ảnh trực tuyến có khả năng chỉnh
sửa ảnh như thay đổi kích thước, cắt ảnh, lật ảnh, xoay ảnh… và nén với định dạng
jpeg.
Từ khóa: album ảnh, quản lý ảnh trực tuyến, chỉnh sửa ảnh
Lời cam đoan
Tôi xin cam đoan kết quả đạt được trong khóa luận này là sản phẩm nghiên cứu, tìm
hiểu của riêng cá nhân tôi. Trong toàn bộ nội dung khóa luận, những điều được trình
bày hoặc là của cá nhân tôi hoặc là được tổng hớp từ nhiều nguồn tài liệu khác. Tất cả
tài liệu tham khảo đều có xuất xứ rõ ràng và trích dẫn hợp pháp.
Tôi xin hoàn toàn chịu trách nhiệm và chịu mọi hình thức kỷ luật theo quy định cho lời
cam đoan của mình.
Hà nội, ngày tháng năm
Hà Nội, ngày 13 tháng 5 năm 2013
Người cam đoan
Dũng
Mai Văn Dũng
MỤC LỤC
Danh mục hình vẽ
8

MỞ ĐẦU
Sự phát triển mạnh mẽ của công nghệ đã tạo ra những thiết bị chụp ảnh cá nhân,
những chiếc điện thoại có tích hợp khả năng chụp ảnh hay những chiếc máy tính cá
nhân cũng có thể chụp ảnh. Vì vậy hình ảnh có thể tạo ra mọi lúc mọi nơi và trong mọi
hoàn cảnh. Với khả năng tạo ra hình ảnh mọi lúc mọi nơi như vậy ai cũng có thể tạo
cho mình những hình ảnh đẹp và độc đáo, khi số lượng hình ảnh còn ít ta không gặp
phải rắc rối trong quản lý hình ảnh, nhưng khi số lượng này tăng lên đến mức đáng kể
thì việc tìm lại một hình ảnh là một việc hết sức đau đầu. Mọi người chụp những hình
ảnh đẹp hầu như không phải ngắm một mình, ai cũng có nhu cầu chia sẻ với bạn bè
người thân. Ngoài ra chúng ta cũng có những hình ảnh quý không thể đánh mất như
những ảnh kỷ niệm, ảnh tài liệu… vào một ngày nào đó bỗng dưng máy tính gặp sự
cố, chiếc ổ cứng không thể hoạt động được nữa, như vậy mọi tài liệu cũng như những
hình ảnh quý giá đó sẽ không bao giờ thấy lại được nữa.
Giải pháp cho vấn đề quản lý hình ảnh các nhân và chia sẻ các hình ảnh này được giải
quyết bằng cách sử dụng một website quản lý ảnh trực tuyến, website này sẽ cung cấp
các tiện ích chia sẻ ảnh cho bạn bè, chỉnh sửa ảnh, tìm kiếm hình ảnh, xem hình ảnh
theo album, theo dòng thời gian… khi đó việc chia sẻ ảnh, quản lý ảnh thật sự là công
việc đơn giản. Những hình ảnh đó sẽ không phải lo lắng về việc bị mất nữa.
Khóa luận này tập trung xây dựng một website quản lý ảnh cá nhân trực tuyến có các
tiện ích chia sẻ, chỉnh sửa… nội dung của khóa luận gồm 5 chương
Chương 1: Giới thiệu
Nội dung của chương 1 sẽ giới thiệu một số khái niệm vào công nghệ liên quan đến xử
lý ảnh và xây dựng một website.
Chương 2: chuẩn nén ảnh jpeg
Chuẩn nén ảnh JPEG là một tiến trình gồm nhiều bước, trong chương 2 sẽ trình bày
từng bước của tiến trình nén ảnh này.
Chương 3: Các công nghệ sử dụng trong phát triển ứng dụng website
Phát triển ứng dụng web không chỉ sử dụng một ngôn ngữ duy nhất mà là sự kết hợp
của nhiều ngôn ngữ và công nghệ. Nội dung của chương này sẽ giới thiệu về một số
ngôn ngữ thường sử dụng trong phát triển một ứng dụng web như HTML, JavaScript,

PHP và hệ quản trị cơ sở dữ liệu MySQL
Chương 4: Website quản lý ảnh cá nhân
9
Trong chương 4 này có những phân thích và thiết kế bao gồm thiết kế cơ sở dữ liệu,
thiết kế giao diện, xây dựng các giải thuật, cài đặt và thử nghiệm hệ thống.
Chương 5: Tông kết
Chương 5 đưa ra hướng phát triển tiếp theo của đề tài cũng như những kiến thức thu
được sau khi hoàn thành khóa luận và những vướng mắc trong quá trình thực hiện đề
tài.
10
CHƯƠNG 1 GIỚI THIỆU
1.1. Ảnh số
Ảnh số được cấu tạo từ ma trận các điểm nhỏ hay được gọi là pixel. Mỗi điểm này thể
hiện một màu sắc tại vị trí tương ứng của bức ảnh. Trong đồ họa máy tính và in ấn, các
điểm ảnh này là các ô vuông. Số điểm ảnh càng lớn hình ảnh càng mịn và sắc nét. Tuy
nhiên không phải số điểm ảnh quyết định hoàn toàn chất lượng một tấm ảnh mà còn
yếu tố khác như dải màu hình ảnh thể hiện được, dải màu càng lớn cho ra hình ảnh
càng chân thực, thông thường hình ảnh sử dung 24bit biểu diễn một điểm ảnh có nghĩa
là hình ảnh có thể thể hiện được 2
24
màu sắc.
Đồng nghĩa với hình ảnh chất lượng cao, độ phân giải cao cũng như sử dụng nhiều bit
cho mỗi điểm ảnh là cái giá phải trả để lưu thông tin ảnh càng lớn. Tuy nhiên hiện nay
đã có nhiều phương pháp nén hình ảnh giúp cho dung lượng giảm đi mà chất lượng
không thay đổi hoặc có thay đổi không đáng kể.
1.2. Nén dữ liệu
Nén dữ liệu là thay đổi cách biểu diễn dữ liệu gốc sang một dạng khác có kích thước
nhỏ gọn hơn và từ dữ liệu nén có thể khôi phục lại dữ liệu gốc một cách nguyên vẹn
hoặc nếu có sai lệch hay mất mát thì phải ở mức chấp nhận được. Với việc nén dữ liệu,
các tập tin được sao chép, di chuyển và lưu trữ hiệu quả hơn.

Cơ bản có hai phương pháp nén dữ liệu là nén bảo toàn dữ liệu (lossless compression)
và nén có mất mát dữ liệu (lossy compression).
- Với phương pháp nén bảo toàn dữ liệu ta có thể khôi phục lại nguyên vẹn
dữ liệu gốc từ dữ liệu sau sau khi nén.
- Với phương pháp nén mất mát dữ liệu. Từ dữ liệu nén ta có thể khôi phục
lại gần đúng dữ liệu gốc. Trong Dữ liệu được khôi phục một số thông tin sẽ
bị mất mát hoặc sai lệch so với nguyên bản, tuy nhiên những mất mát và sai
lệch này là không đáng kể và có thể chấp nhận được. Thông thường các dữ
liệu ảnh và âm thanh sử dụng phương pháp nén mất mát dữ liệu vì âm thanh
và hình ảnh có nhiều thành phần mà mắt và tai người không cảm nhận hoặc
kém nhạy cảm khó có thể phân biệt.
1.3. Công nghệ phát triển ứng dụng web
Ứng dụng web có lợi thế là không phụ thuộc vào hệ điều hành, có thể hoạt động ở bất
cứ đâu có kết nối Internet, mỗi lần chỉnh sửa hay nâng cấp ta chỉ cần thực hiện một lần
trên trên server của hệ thống, không cần phải thực hiện trên từng người dùng cá nhân.
11
Các ứng dụng máy tính có thể được tạo ra bằng một ngôn ngữ duy nhất như C/C++,
Java, C# tuy nhiên một ứng dụng web cần sự kết hợp của nhiều ngôn ngữ và công
nghệ như:
- HTML một ngôn ngữ đánh dấu tạo cấu trúc cũng như nội cho trang web.
Các trình duyệt dựa vào nội dung HTML để hiển thị.
- CSS là ngôn ngữ hỗ trợ HTLM trong việc tạo ra cấu trúc trang web, CSS
chỉ xử lý định dạng giao diện của trang web giúp mã ngồn trang web tách
riêng phần nội dung và hình thức.
- Ngôn ngữ phía trình duyệt xử lý các xự kiện và thực hiện các tính toán ngay
trên trình duyệt mà không cần kết nối với server. JavaScript là một ngôn
ngữ kịch bản chạy trên trình duyệt.
- Ngôn ngữ xử lý phía server quản lý các yêu cầu người dùng, tạo ra các nội
dung động phụ thuộc yêu cầu người dùng và hoàn cảnh. PHP là một ví dụ.
- Hệ quản trị cơ sở dữ liệu, đây là một ứng dụng chuyên quản lý dữ liệu, ta

chỉ cần đưa ra các yêu cầu và hệ quản trị cơ sở dữ liệu thực hiện các xử lý
và trả lại kết quả. MySQL là hệ quản trị cơ sở dữ liệu xử lý nhanh và hoàn
toàn miễn phí.
- Để nâng cao khả năng tương tác, biểu diễn và tạo ra những nội dung phức
tạp của một trang web ta cần thêm thành phần hiển thị nội dung media.
Trước đây ta phải sử dụng một công nghệ của bên thứ 3 như flash player…
nhưng với sự ra đời của HTML5 đã bổ sung thêm thành phần canvas nhờ
đó ta có thể sử dụng hoàn toàn HTML.
12
Ảnh gốc
Chuyển đổi không gian màu
Giảm mẫu
Biến đổi cosin rời rạc
Lượng tử hóa
Mã hóa
Ảnh nén
CHƯƠNG 2: CHUẨN NÉN ẢNH JPEG
2.1Chuẩn nén ảnh jpeg
JPEG là tên viết tắt của Joint Photographic Experts Group, tên của hiệp hội các nhiếp
ảnh gia chuyên nghiệp và cũng là tên của chuẩn nén ảnh. JPEG được nghiên cứu và
phát triển từ 1986 tuy nhiên chính thức công bố năm 1991. Sau đấy chuẩn này tiếp tục
được phát triển và bổ sung những công nghệ mới nhằm tăng khả năng nén dữ liệu
cũng như tăng chất lượng ảnh sau khi nén [8].
Để giảm dung lượng lưu ảnh mà không phải giảm số điểm ảnh hay giảm số bit biễu
diễn một điểm ảnh, ta cần tìm ra những dư thừa dữ liệu để giảm những thông tin phải
lưu không cần thiết. JPEG là một phương pháp sử dụng các biến đổi toán học để tạo ra
nhiều dư thừa dữ liệu hơn nhằm tăng tỉ lệ nén. Trong các biến đổi toán học có sử dụng
đến các phép toán gần đúng và loại bỏ dữ liệu nên khi giải nén ta không thể thu lại
được dữ liệu như ban đầu vì thế phương pháp JPEG được gọi là nén có mất mát dữ
liệu. Việc mất mát dữ liệu này mắt người khó có thể nhận ra nên ta có thể chấp nhận

được sự mất thông tin này.
Các ảnh sử dụng chuẩn nén ảnh JPEG thường có phần mở rộng là .jpeg, .jfif, .jpg,
.JPG, hay .JPE dạng .jpg là dạng được dùng phổ biến nhất. Ngoài sử dụng cho nén ảnh
thì các chuẩn video như MP4 cũng sử dụng trong mã hóa các khung hình [7].
Quá trình nén ảnh theo chuẩn JPEG thực sự là một quá trình phức tạp gồm nhiều kĩ
thuật khác nhau kết hợp lại tạo nên hiệu quá nén cao.
Sơ đồ quá trình nén ảnh theo chuẩn JPEG
Hình 1: sơ đồ quá trình nén ảnh
13
14
Ảnh nén Giải mã Giải lượng tử
Biến đổi cosin ngược
Khôi phục mẫu
Chuyển đổi không gian màu
Ảnh giải nén
Quá trình giải nén sẽ thực hiện các bước ngược lại với mã hóa
Hình 2: sơ đồ quá trình giải nén
2.2Các kỹ thuật sử dụng trong chuẩn JPEG
2.2.1 Phương pháp nén Huffman
Thuật toán được đề xuất bởi David A. Huffman khi ông còn là sinh viên Ph.D. tại
MIT, và công bố năm 1952 [4].
Ý tưởng của thuật toán là tính tần suất xuất hiện của các ký tự và sau đó biểu diễn các
ký tự có tần suất xuất hiện nhiều bằng mã bit ngắn và các ký tự có tần suất xuất hiện ít
hơn bằng mã bit dài hơn. Nhờ đó mà tổng số bit cần biểu diễn dữ liệu được giảm đi.
Khi biễu diễn các ký tự theo cách thông thường, mỗi ký tự sẽ sử dụng một số bit cố
định, việc giải mã sẽ thực hiện đọc lần lượt số lượng bit đã quy ước trước để giải mã
cho mỗi ký tự. Ví dụ để biễu diễn một chuỗi “ABBCC” ta sử dụng 2 bit để biễu diễn A
tương ứng là 00, B tương ứng là 01 và C là 10 vậy chuỗi “ABBCC” được mã hóa là
0001011010, quá trình giải mã thực hiện đọc lần lượt 2 bit và so sánh với bảng mã để
giải mã cho ký tự.

Khi mã hóa các ký tự bằng mã có độ dài khác nhau ta sẽ gặp phải rắc rối với quá trình
giải mã. Ta cần phải đọc bao nhiêu bit để giải cho ký tự đã mã hóa. Giải pháp được sử
dụng là mã tiền tố.
Mã tiền tố là bộ các mã sao cho không có mã nào là phần bắt đầu của một mã khác, ví
dụ nếu X mã hóa là 00 và Y là 001 ta thấy mã của X là 00 và cũng là phần bắt đầu của
Y 001. Nếu mã hóa X là 00 và Y là 010 thì không mã nào là bắt đầu của mã nào.
Trong mã hóa với độ dài cố định hiển nhiên các mã không có mã nào là bắt đầu của
mã khác trong bảng mã trừ khi hai mã đó là giống nhau. Việc xây dựng bảng mã tiền
tố có thể thực hiện bằng cách xây dựng một cây nhị phân có n lá, mỗi lá ta đặt một ký
15
*
A
B
C
*
1
0
0
1
tự. Khi đó xác định mã của mỗi ký tự là việc duyệt từ gốc tới lá của cây nhị phân đó,
với quy ước mỗi lần rẽ sang nhánh trái ta thêm 0 và rẽ nhánh phải ta thêm 1 vào mã.
Ví dụ về cây xác định mã tiền tố
Hình 3: cây mã tiền tố
Quá trình giải nén thực hiện việc đọc lần lượt từng bit trong tập tin nén đồng thời
duyệt cây mã tiền tố đã xây dựng trong quá trình nén cho đến khi gặp lá. Ghi ký tự ở lá
ra tập tin giải nén, thực hiện quá trình cho đến bit cuối cùng của tập tin nén.
Thuật toán xác định cây mã tiền tố Huffman.
Bước 1: Tính tần suất xuất hiện của các ký tự, khởi tạo mỗi ký tự thành một cây với
gốc là ký tự đó và trọng số là tần suất của ký tự
Bước 2: Chọn 2 cây có trọng số gốc nhỏ nhất hợp thành một cây, trọng số ở gốc sẽ là

tổng trọng số của 2 cây hợp thành, cây có trọng số nhỏ hơn sẽ ở bên trái, cây có trọng
số lớn hơn ở bên phải.
Bước 3: Lặp lại bước 2 cho đến khi chỉ còn 1 cây duy nhất.
Sau khi hoàn thành ta sẽ có 1 cây, đây là cây mã tiền tố Huffman cho các ký tự ở các
lá.
Ví dụ xác định cây Huffman cho chuỗi “ABBCC”
Tần suất của A là 0.2, B là 0.4 và C là 0.4
16
A
B
C
0.2 0.4 0.4
A
B
0.6
C
1
C
A
B
0.6
0.4
0.2
0.4
0.4
0.2
0.4
Hình 4: quá trình hình thành cây mã tiền tố
2.2.2 Phương pháp mã hóa loạt dài (RLC - Run Length Coding)
Ý tưởng của phương pháp mã hóa là tìm một loạt các bit lặp lại ví dụ một loạt bit 0

nằm giữa bit 1 hoặc ngược lại một loạt bit 1 nằm giữa bit 0 và biễu diễn loạt bit lặp lại
này bằng hai thông tin là chiều dãi chuỗi bit lặp và giá trị bit lặp [11].
Trong trường hợp chiều dài mã lặp lớn hơn giá trị có thể biểu diễn của trường biễu
diễn chiều dài thì ta chia mã lặp thành nhiều phần nhỏ.
Phương pháp mã hóa loạt dài có nhược điểm là khi các đoạn mã lặp có chiều dài ngắn,
trong trường hợp tồi tệ nhất đoạn mã lặp có chiều dài chỉ là một thì sử dụng mã hóa
loạt là không hiệu quả thậm chí là tăng số bit sử dụng biểu diễn.
2.2.3 Các không gian màu
Không gian màu RGB được tạo ra từ sự kết hợp của ba thành phần màu sắc là đỏ
(Red) lục (Green) và lam (Blue). Các màu sắc còn lại sẽ được tạo ra từ sự kết hợp của
17
ba màu sắc cơ bản theo tỉ lệ xác định giống như sự pha màu của cầu vồng. Các màn
hình, máy in… biểu diễn điểm ảnh bằng cách pha 3 màu sắc cơ bản này với nhau để
tạo ra các màu sắc cần thiết, do sự tương đồng về biểu diễn này nên RGB được sử
dụng phổ biến trong đồ họa máy tính. Như đã biết, sử dụng càng nhiều bit để biểu diển
một điểm ảnh thì khả năng biểu diễn màu sắc càng nhiều và cũng đồng nghĩa với việc
tăng dung lượng lưu trữ thông tin ảnh và các phép xử lý cũng nhiều hơn. Thông
thường RGB sử dụng 8bit cho mỗi thành phần màu sắc như vậy mỗi điểm ảnh sử dụng
24bit để biểu diễn. Ngoài ra một số phần mềm đồ họa chuyên dụng sử dụng 16bit để
biễu diễn mỗi thành phần tức là 48bit để biểu diễn màu sắc cho mỗi điểm ảnh. Việc sử
dụng 48bit để biểu diễn giúp hạn chế các sai số trong quá trình xử lý tính toán số học
phức tạp.
Không gian màu RGB còn có biến thể là RGBA với ba thành phần đầu là RGB giống
như RGB thông thường và kết hợp thêm thành phần thứ tư dùng cho kênh alpha để
biểu diễn độ trong suốt hay khả năng nhìn xuyên của điểm ảnh. Việc thêm này làm
tăng số lượng bit biểu diễn mỗi điểm ảnh từ 24bit lên 32bit tận dụng tối đa kiến trúc
phần cứng hiện đại [1].
Không gian màu RGB được sử dụng phổ biến trong đồ họa máy tính. Tuy nhiên trong
truyền hình vô tuyến người ta đã phát triển không gian màu YUV là sự kết hợp của
một thành phần độ sáng Y (hay gọi là độ chói) và hai thành phần màu sắc là U và V.

Không gian màu YUV có tính chất tương tự và gần với nhận thức của mắt người hơn
là RGB.
Ngoài hai không gian màu được nói đến trên, người ta còn phát triển nhiều không gian
màu sắc khác như HSB… tuy nhiên chúng ta sẽ không nhắc đến ở đây.
2.3Phương pháp nén ảnh jpeg
2.3.1 Chuyển đổi không gian màu
Mắt người nhạy cảm nhiều hơn với độ sáng hơn là màu sắc. Chính nhờ đặc điểm này
mà chúng ta có thể nén nhiều hơn, có nghĩa là chấp nhận mất mát nhiều thông tin về
màu sắc hơn.
Ảnh số được biễu diễn bằng không gian màu RGB, vì vậy trước khi thực hiện các xử
lý tiếp theo của quá trình nén JPEG ta phải chuyển đổi từ không gian màu từ RGB
sang không gian màu YUV, việc chuyển đổi này là thuận nghịch nên khi giải nén ta có
thể biến đổi ngược lại từ YUV sang RBG để hiển thị. Nhờ chuyển đổi không gian màu
mà ta có thể dễ dàng xác định thành phần màu sắc và thành phần độ chói, tạo thuận lợi
cho xử lý nén thành phần màu sắc ở tỉ lệ cao và thành phần độ chói ở tỉ lệ thấp hơn.
Công thức chuyển đổi từ không gian màu RGB sang YUV [1]
18
Khối 8x8
Ảnh gốc
Y = R * 0.299000 + G * 0.587000 + B * 0.114000
U = R * -0.168736 + G * -0.331264 + B * 0.500000 + 128
V = R * 0.500000 + G * -0.418688 + B * -0.081312 + 128
Việc chuyển đổi từ không gian màu YUV sang RGB được thực hiện ngược lại.
R = Y + 1.4075 * (V - 128)
G = Y - 0.3455 * (U - 128) - (0.7169 * (V - 128))
B = Y + 1.7790 * (U - 128)
2.3.2 Chia ảnh thành các khối
Sau khi thực hiện chuyển đổi từ không gian màu RGB sang không gian màu YUV ta
tiến hành chia khối. Từ khối Y, U, V có kính thước lớn ta tiến hành chia thành nhiều
khối nhỏ, mỗi khối có kích thước 8x8.

Ví dụ với hình ảnh sau
Hình 5: ảnh gốc
Sau khi chia thành các khối 8x8
Hình 6: ví dụ chia khối
19
Sau khi đã thực hiện xong quá trình chia ảnh thành các khối có kính thước 8x8, quá
trình nến ảnh sẽ thực hiện biến đổi cosin rời rạc (DCT) cho từng khối này. Việc chia
nhỏ ảnh ban đầu thành nhiều khối 8x8 giúp cho việc thực hiện phép biến đổi cosin rời
rạc được nhanh hơn và chính xác hơn. Trong phần sau, khi nói tới biến đổi cosin rời
rạc chúng ta sẽ làm rõ điều này.
2.3.3 Biến đổi cosin rời rạc
Đây là bước quan trọng nhất của chuẩn nén ảnh jpeg sử dụng biến đổi cosin rời rạc.
Bước xử lý này có tác dụng biến đổi thông tin ảnh từ miền không gian sang miền tần
số để có thể biểu diễn dưới dạng gọn hơn. DCT được sử dụng rộng rãi vì tính gói năng
lượng tốt, kết quả của biến đổi DCT là các số thực.
Công thức biến đổi cosin rời rạc hai chiều
Trong đó
Trong ma trận DCT hệ số đầu tiên X(0,0) được gọi là thành phần DC bằng giá trị trung
bình của các điểm ảnh trong khối 8x8, các hệ số còn lại được gọi là thành phần AC.
Các hệ số nằm ở các cột bên phải của thành phần một chiều đặc trưng cho các tần số
cao hơn theo chiều ngang. Hệ số X(0,7) là thành phần có tần số cao nhất theo chiều
ngang của block ảnh 8×8, và hệ số X(7,0) đặc trưng cho thành phần có tần số cao nhất
theo chiều dọc. Còn các hệ số khác ứngvới những phối hợp khác nhau của các tần số
theo chiều dọc và chiều ngang.
Các hệ số AC biến đổi từ -1023 đến +1023 và các hệ số DC biến đổi từ 0 đến 2040. Để
tiện thực hiện biến đổi trong các bước sau. Mỗi hệ số trong khối 8x8 được trừ đi 128
khi đó các hệ số AC và DC sẽ biến đổi trong cùng một khoảng.
Các thành phần DC thường có giá trị lớn nhất, các thành phần AC thường có giá trị rất
nhỏ
Trong biến đổi DCT đầu vào được chia thành các khối 8x8 cố định nên ta có thể tính

trước các hệ số giảm thiểu các tính toán.
Quá trình biến đổi DCT là 2 chiều nên không gây mất mát thông tin.
Quá trình giải nén sẽ sử dụng biến đổi DCT ngược
Trong đó
2.3.4 Lượng tử hóa
Các hệ số trong DCT được lượng tử hóa riêng biệt, mỗi hệ số sẽ được chia cho một hệ
số tương ứng trong ma trận lượng tử và sau đó làm tròn đến số nguyên gần nhất. Mắt
người kém nhạy cảm hơn ở những hệ số có tần số cao và nhạy cảm hơn ở những hệ số
có tần số thấp, vì vậy các hệ số lượng tử được chọn sao cho thực hiện lượng tử hóa ở
tinh hơn ở những hệ số có tần số thấp và thô ở những hệ số có tần số cao.
20
Công thức lượng tử hóa
Trong đó:
- X
’
(u,v) là ma trận sau lượng tử
- X(u,v) là ma trận sau biến đổi DCT
- Q(u,v) là ma trận lượng tử
Các bảng lượng tử được định nghĩa tùy vào mỗi ứng dụng, dưới đây là ví dụ về một
bảng lượng tử thường được sử dụng
Quá trình lượng tử có sử dụng phép toán làm tròn không có phép biến đổi ngược lại
nên không có phép biến đổi ngược lại chính xác đây là cái giá phải trả cho việc giản
lượng thông tin biểu diễn các điểm ảnh.
Các giá trị trong bảng lượng tử có giá trị từ 1 đến 255 được gọi là bước nhảy cho các
hệ số DCT.
Kết quả của lượng tử hóa sẽ tạo ra nhiều hệ số có giá trị 0, điều nay mang lại hiệu quả
của quá trình nén.
Sau khi thực hiện lượng tử hóa các hệ số trong ma trận hai chiều được sắp xếp theo
hình zigzag tạo thành mảng một chiều nhằm tạo ra nhiều hệ số giống nhau. Các hệ số
này sẽ được nén bằng phương pháp RLE

Các thành phần màu xắc U và V trong không gian màu YUV có thể nén ở mức cao
hơn và thành phần độ chói Y cần nén hợp lý để có thể khôi phục lại chính xác nhất.
Bảng lượng tử được sẽ được lưu vào header của tập tin để quá trình giải nén có đầy đủ
thông tin khôi phục lại hình ảnh gần giống ban đầu nhất
2.3.5 Mã hóa
Các khối sau khi đã được lượng tử hóa sẽ được gép lại với nhau và nén lại bằng
phương pháp nén Huffman.
2.3.6 Ghi ra tập tin
Sau khi đã thực hiện toàn bộ quá trình nén, việc cuối cùng là lưu những thông tin này
ra một tập tin. Các thông tin cần thiết cho quá trình giải nén được lưu lại. Tập tin jpeg
được bắt đầu với mã 0xFFD8 và kết thúc 0xFFD9. Mã 0xFF được gọi là marker theo
sau đó là 2 byte thể hiện loại của dấu như trên D8 là bắt đầu của JPEG và D9 là kết
thúc của JPEG
2.3.7 Giải mã tập tin
Việc giải mã tập tin được thực hiện theo các bước ngược lại với quá trình mã hóa. Tuy
nhiên vì quá trình mã hóa thực hiện theo các khối có kích thước 8x8 nên các vùng biên
21
thường bị biến dạng, để khắc phục hiện tượng này, sau khi giải mã người ta thực hiện
làm trơn các đường biên bằng phương pháp nội suy.
2.3.8 Ưu điểm
Phương pháp nén ảnh jpeg có ưu điểm là nén ảnh với tỉ lệ cao 80:1 thậm chí có thể cao
hơn. Lưu ảnh với chất lượng tốt mà dung lượng giảm đi không đáng kể.
Phù hợp cho các website cần những ảnh có dung lượng nhỏ. Các thiết bị kĩ thuật số
như máy ảnh du lịch
2.3.9 Nhược điểm
Vì phương pháp nén ảnh jpeg sử dụng thuật toán nén mất mát dữ liệu nên gây mất mát
thông tin,
Việc lưu trữ không phù hợp vì sau mỗi lần giải nén và nén lại sẽ gây mất mát thông
tin, sau nhiều lần nén bức ảnh sẽ bị biến dạng và không thể khôi phục
Việc xử lý trên các khối có kích thước 8x8 có làm tốc độ quá trình nén được cải thiện

nhưng lại gây ra biến dạng trên các đường biên của các khối, tỉ số nén càng cao các
đường biên này càng rõ, và các chi tiến trong ảnh cũng bị biến dạng. Tuy nhiên với
những ảnh gốc ban đầu có chất lượng cao thì hiện tượng này khó phát hiện nên có thể
chấp nhận được
22
CHƯƠNG 3: CÁC CÔNG NGHỆ PHÁT TRIỂN ỨNG DỤNG WEB
3.1JavaScript
3.1.1 Giới thiệu về JavaScript
JavaScript là ngôn ngữ kịch bản chạy trên các trình duyệt web không phụ thuộc vào hệ
điều hành. JavaScript được sử dụng để tạo ra những chức năng tương tác mà HTML
không làm được như kiểm tra các điều kiện nhập, xử lý các sự kiện người dùng. Mặc
dù có tên là JavaScript nhưng JavaScript không được phát triển từ java.
JavaScript có khả năng tương tác với các thành phần HTML. Không những thế,
JavaScript cũng có thể tương tác với hệ điều hành và các thành phần khác, tạo ra khả
năng đáng ngạc nhiên của JavaScript
JavaScript không chỉ được phát triển cho client mà còn được phát triển cho server, ví
dụ như node.js
3.1.2 Cú pháp
Cú pháp của JavaScript gần giống với Java sử dụng cặp kí tự “/*” để bắt đầu phần chú
thích và “*/” để kết thúc phần chú thích. Với cặp kí tự “/*” và “*/” ta có thể sử dụng
để ghi chú thích trên nhiều dòng. Cặp ký tự “//” cũng được sử dụng để bắt đầu phần
chú thích trên một dòng, sau khi xuống dòng sẽ không còn là chú thích nữa.
Để khai báo một biết ta có thể sử dụng từ khóa “var” sau đấy là tên biến hoặc có thể sử
dụng mà không cần khai báo từ trước. Với biến được khai báo bằng từ khóa “var” thì
chỉ sử dụng trong phạm vi cục bộ của trong hàm đã khai báo, còn với biến được sử
dụng mà không khai báo với từ khóa “var” sẽ được tính là biến toàn cục. Trong trường
hợp biến khai báo với từ khóa “var” đặt ở ngoài tất cả các hàm cũng được xem là biến
toàn cục.
Không giống như C hay Java phải khai báo rõ kiểu của biến muốn sử dụng. JavaScript
sử dụng biến để lưu 5 kiểu dữ liệu sơ cấp là undefined (phi đối tượng), null, boolean,

number (có thể là số nguyên hoặc số thực), string và 2 kiểu đối tượng là object và
function, kiểu của biến sẽ được suy đoán từ giá trị gián cho biến. Đặc điểm thú vị là
chúng ta có thể sử dụng cùng một mảng để lưu tất cả các kiểu dữ liệu, hay ta cũng có
thể sử dụng một biến đang lưu số để lưu chuỗi hay ngược lại.
Các hàm được khai báo bằng từ khóa function sau đó là tên hàm giống như trong java
tuy nhiên danh sách các biến đầu vào không cần phải khai báo kiểu mà chỉ cần đưa ra
tên, cũng giống như khai báo biến ta không cần phải khai báo kiểu dữ liệu mà hàm trả
về. Khi khai báo một hàm thì một biến cục bộ “arguments” được sinh ra, biến này là
23
một mảng chứa các tham số đầu vào của hàm. Sau đây là ví dụ về khai báo và sử dụng
hàm trong JavaScript
function func(v1, v2, v3){
var s;
for (var i=0; i < arguments.length; i++){
s += 'Argument ' + i + ' is ' + arguments[i];
}
return s;
}
A = func(1, ‘string’, 0.9);
Đoạn mã gán biến “A” bằng kết quả trả về của hàm func với các tham số đầu vào là 1,
‘string’, 0.9
Các vòng lặp for, while, cấu trúc rẽ nhánh switch case, if else đều được sử dụng giống
java. Tên biến có phân biệt chữ hoa và chữ thường, tên biên phải bắt đầu bằng
3.1.3 Sử dụng JavaScript
Để nhúng một đoạn mã JavaScript trong HTML ta sử dụng thẻ khai báo <script
type="text/javascript"> tiếp theo sau là đoạn mã JavaScript mà ta muốn sử dụng cho
trang web, để kết thúc khai báo ta sử dụng thẻ đóng </script>
Ngoài ra ta cũng có thể viết mã JavaScript tách biệt với HTML, tập tin JavaScript
thường có phần mở rộng là js sau khi đã có mã JavaScript ta sẽ khai báo trong HTML
như sau <script type="text/javascript" src="url"></script> trong đó url là đường dẫn

tới tập tin JavaScript
3.2AJAX
3.2.1 Giới thiệu về AJAX
AJAX viết tắt của Asynchronous JavaScript and XML nghĩa là JavaScript và XML
không đồng bộ. AJAX không phải là tên của một công nghệ, AJAX là thuật ngữ dùng
để mô tả việc sử dụng một nhóm nhiều công nghệ kết hợp với nhau. Thuật ngữ này lần
đầu tiên được nhắc tới vào năm 2005, tuy nhiên nguồn gốc của AJAX thì đã có từ
trước đó rất lâu. Kể từ đấy AJAX nhận được nhiều sự chú ý hơn và ngày càng phát
triển mạnh mẽ [5].
24
Về cơ bản AJAX hoạt động dựa vào nguyên tắc sau
Gửi yêu cầu tới server mà không cần tải lại trang. Các yêu cầu gửi đi là http request có
thể là GET, POST
Nhận kết quả xử lý từ phía server. Sau khi server xử lý xong yêu cầu mà client gửi thì
sẽ trả lại kết quả đó cho client thông qua kết nối trước đó.
Xử lý kết quả mà server trả về. Thường server sẽ trả về kết quả dưới dịnh dạng XML,
đây là ngôn ngữ đánh dấu được sử dụng phổ khá phổ biến, tuy nhiên cũng có thể là
JSON, đây là định dạng dữ liệu, vì JSON có định dạng giống với khai báo biến trong
ngôn ngữ JavaScript nên rất thuận lợi khi kết hợp với JavaScript Khi đã nhận được
kết quả từ server gửi trả về client sử dụng JavaScript liên kết dữ liệu nhận được và dữ
liệu đã có để cập nhật lại giao diện client
Nhờ vào quá trình xử lý là liên tục và trong xuốt với người dùng mà ứng dụng web sử
dụng AJAX có tính thân thiện cao và khả năng xử lý được nâng cao.
3.2.2 Ưu điểm của AJAX
AJAX làm tăng khả năng tương tác của người dùng với ứng dụng web, các ứng dụng
web có thể thực hiện những xử lý ngầm với server, sau đó server trả về kết quả để
client cập nhật lại dữ liệu thay đổi nội dung phù hợp với những cập nhật đó.
3.2.3 Nhược điểm của AJAX
Không thể phủ định những lợi ích mà AJAX mang lại, nhưng AJAX cũng có những
nhược điểm mà không thể không chú ý tới.

Dễ nhận thấy nhất là nội dung của trang web có thể sửa đổi nội dung liên tục tùy vào
yêu cầu của người dùng. Điều này tạo ra sự linh hoạt trong ứng dụng sử dụng AJAX
nhưng lại cũng là nhược điểm, khi người dùng muốn xem nội dung mình đã xem trước
đó thì không thể sử dụng liên kết cũ để đọc được vì
3.3CSS
3.3.1 Giới thiệu về CSS
Khi định dạng trình bày một trang web sử dụng HTML sẽ làm cho những đoạn code
trở nên phức tạp khó theo dõi và kiểm soát ngoài ra các thành phần không nhất quán,
lặp lại nhiều gây dư thừ không hiệu quả. Ta có thể dễ dàng nhận ra sự dư thừa qua một
một ví dụ đơn giản như sau. Khi ta muốn đặt màu sắc của tất cả các liên kết là màu đỏ,
khi con trỏ chuột di chuyển qua thì sẽ có màu xanh thì với mỗi liên kết sẽ phải khai
báo màu sắc mỗi trạng thái cho tất cả các liên kết. Đôi khi ta có thể sẽ quên với một
25