ĐẠ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

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,

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

đượ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ự.

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

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.

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

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,

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.