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

khóa luận về xử lý ảnh và tạo website xử lý ảnh bằng html5

ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ

ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ

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ôngnghệ - đạ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ôitrong 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 trongsuố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ậntố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óaluậ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ênDũ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 haynhữ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íchhợ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 saumộ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ộidung 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ỉnhsửa ảnh như thay đổi kích thước, cắt ảnh, lật ảnh, xoay ảnh… và nén với định dạngjpeg

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ờicam đ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 đoanDũng

MỤC LỤC

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ọihoà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ạocho 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ặpphả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ữnghì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ảiquyế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ấpcá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 ảnhtheo album, theo dòng thời gian… khi đó việc chia sẻ ảnh, quản lý ảnh thật sự là côngviệ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áctiệ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àytừ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ợpcủ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

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ỆU1.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 Tuynhiê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ònyế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 ảnhcà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 224 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 bitcho 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ượngkhô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ướcnhỏ 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ẹnhoặ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ụclạ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à sailệ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ặcké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ầntrê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

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ôngnghệ 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, CSSchỉ xử lý định dạng giao diện của trang web giúp mã ngồn trang web táchriê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 ngaytrên trình duyệt mà không cần kết nối với server JavaScript là một ngônngữ 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ộidung độ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, tachỉ 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àntoà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ứctạ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ạcLượng tử hóa

Mã hóaẢnh nén

CHƯƠNG 2: CHUẨN NÉN ẢNH JPEG 2.1 Chuẩ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ệucũ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ễudiễ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ảilư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 ranhiề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 ảnhthì 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

Ảnh nén Giải mã Giải lượng tử Biến đổi cosin ngược

Khôi phục mẫuChuyển đổi không gian màu

Ảnh giải nénQuá 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.2 Cá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ạiMIT, 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 íthơ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 Atươ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ìnhgiả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ý

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ớigố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áclá

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

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 0nằ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ạinà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ễudiễ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óaloạ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

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ànhì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ểnmộ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ệctă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ôngthườ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ụng24bit để 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ọcphứ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ốngnhư 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àmtă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úcphầ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 trongtruyề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ủamộ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 gianmàu sắc khác như HSB… tuy nhiên chúng ta sẽ không nhắc đến ở đây

2.3 Phươ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ừ RGBsang 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ợicho 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

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

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 chianhỏ ả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ờirạ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ờirạ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ănglượ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ị trungbì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ềungang 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ấttheo 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 128khi đó 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ấtnhỏ

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ínhtrướ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ắtngườ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

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

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 caohơ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ằngphươ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 theosau đó 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ếtthú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 Tuynhiê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

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ệnlàm trơn các đường biên bằng phương pháp nội suy.

22

CHƯƠNG 3: CÁC CÔNG NGHỆ PHÁT TRIỂN ỨNG DỤNG WEB 3.1 JavaScript

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à HTMLkhô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í

Để 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 ratê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à

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ụnghàm trong JavaScript

Ngoài ra ta cũng có thể viết mã JavaScript tách biệt với HTML, tập tin JavaScriptthườ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.2 AJAX

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à XMLkhô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áttriể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 trongngôn ngữ JavaScript nên rất thuận lợi khi kết hợp với JavaScript Khi đã nhận đượckế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ụngweb 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ữngnhượ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àoyê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 AJAXnhư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.3 CSS

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 codetrở 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ộtmộ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 khaibá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

liên kết nào đó mà ta không chú ý tới và khi muốn sửa đổi sẽ phải tìm lại tất cả cácliên kết và sửa lại cho từng liên kết đó Để giải quyết những rắc rối gặp phải khi sửdụng HTML để định dạng trình bày người ta đã phát triển CSS.

CSS viết tắt của Cascading Style Sheets giới thiệu lần đầu tiên năm 1996 được sửdụng trong định dạng cách trình bày cho giao diện trang web CSS giúp các nhà pháttriển web tách biệt phần nội dung và phần định dạng của trang web, tạo ra sự nhấtquán giữa các thành phần, giảm lặp lại code giúp nâng cao hiệu quả khi phát triển mộttrang web

Hoạt động của CSS dựa vào nguyên tắc các lớp định dạng chồng lên nhau, lớp nào ởtrên cùng sẽ được áp dụng cho thành phần đó

3.3.2 Cú pháp trong CSS

Trong CSS chú thích bắt đầu với cặp ký tự “/*” và kết thúc với cặp ký tự “*/” nội dungcủa chú thích có thể kéo dài nhiều dòng

Để định dạng một đối tượng ta sử dụng khai báo như sau

selector {property: value;}

“selector” là đối tượng cần định dạng, đối tượng ở đây có thể là các thành phần thẻ tagHTML như thẻ <p> thẻ <img> … hoặc cũng có thể là id của một đối tượng cụ thể hayclass của một nhóm các đối tượng “property” là thuộc tính muốn định dạng, ta có thểđịnh dạng hầu hết các thuộc tính từ màu sắc, font chữ, căn lề… value là giá cần cài đặtcho thuộc tính Kết thúc một thuộc tính bằng kí tự “;”

“selector” cũng có thể được gọi theo quan hệ con tức là ta có thể chọn đối tượng làmột nhóm thẻ con của một thẻ cha nào đó để dễ hiểu ta xét một ví dụ sau

ul a{ color: #FF0000;}

Ở ví dụ này thẻ a thuộc thẻ ul là đối tượng được định dạng còn các thẻ a khác sẽ không

bị ảnh hưởng, color là thuộc tính sẽ được cài đặt #FF0000 là giá trị được đặt cho thuộctính màu sắc Như vậy trong ví dụ này các thẻ tag a nằm trong thẻ ul sẽ có màu đỏ, cácthẻ a không nằm trong thẻ ul sẽ không bị ảnh hưởng

Ta cũng có thể chọn nhiều đối tượng cùng lúc, mỗi đối tượng được chọn phân cáchnhau bằng một dấu “,” ví dụ như khi muốn đặt màu xanh cho các thẻ tiêu đề h1, h2,h3, h4, h5, h6 ta sử dụng như sau

26