Quá trình xử lý ảnh thumbnail với PHP. doc

Quá trình xử lý ảnh
thumbnail với PHP


Về bản chất, có rất nhiều website lưu trữ những thư viện ảnh riêng biệt và kiểu thiết
kế dùng chung, tất cả được “nhúng” trong trang đi kèm với những ảnh thumbnail,
mục đích của việc làm này là khi người sử dụng nhấn vào mỗi ảnh thumbnail thì
website sẽ hiển thị ảnh gốc với kích thước lớn hơn. Chúng ta có thể dễ dàng thực hiện
quá trình này bằng cách sử dụng thẻ HTML anchor (<a href= ) được bao quanh bởi
thẻ HTML image (<img src= ). Nhưng làm thế nào để lấy được ảnh thumbnail từ ảnh
gốc có kích thước lớn? Và làm thế nào để đảm bảo được tỉ lệ khung hình của ảnh gốc đó?
Trong bài viết dưới đây, chúng tôi sẽ trình bày một số bước cơ bản để các bạn thực hiện
quá trình này với PHP, và cụ thể là thư viện GD của PHP. Một số thông tin cơ bản khác,
các bạn có thể tham khảo thêm tại đây.
Cơ chế xử lý ảnh của PHP hoạt động như thế nào?
Cụ thể, bên trong mã PHP chúng ta có thể thấy 2 loại ảnh khác nhau. Một loại là chuỗi
các dữ liệu thuộc mã nhị phân “đại diện” cho bức ảnh, và đây cũng chính là những dữ
liệu chúng ta lưu trữ trên file hệ thống của server, được sử dụng bên trong cú pháp của
thẻ HTML <img>. Còn khi muốn hiển thị kích thước khác của ảnh thì chúng ta cần phải
khởi tạo 1 phương thức xuất hiện mới tương ứng. May mắn thay vì trong thư viện GD đã
cho phép người dùng tạo nguồn tài nguyên của PHP hỗ trợ rất tốt tính năng này. Những
chức năng đi kèm của GD cho phép người dùng dễ dàng thực hiện quá trình này tương tự
với cách sử dụng cơ sở dữ liệu truy vấn về các nguồn tài nguyên có liên quan. Khi kết
thúc việc này, hệ thống đã sẵn sàng để lưu và hiển thị ảnh, sau đó là phần còn lại của
PHP có nhiệm vụ trả lại dữ liệu nguồn thành chuỗi mã nhị phân.
Đây là 1 đoạn mã ví dụ trong trường hợp này:
1 <?php // RAY_EE_image_thumbnail.php
2 error_reporting(E_ALL);
3

4
5 // RESIZE AN IMAGE TO FIT INSIDE A DEFINED
TRANSPARENT SPACE
6 // USE CASE: <img
Y_EE_image_thumbnail.php?img=RAY_test_imag
e_thumbnail.jpg&w=150&h=100" />
7
8
9 // ACQUIRE THE ARGUMENTS - MAY NEED SOME
SANITY TESTS?
10 $thumb_w = $_GET["w"];
11 $thumb_h = $_GET["h"];
12 $image_url = $_GET["img"];
13
14 // CREATE THE THUMBNAIL IMAGE RESOURCE
AND FILL IN TRANSPARENT
15 $thumb = imagecreatetruecolor($thumb_w, $thumb_h);
16 imagesavealpha($thumb, TRUE);
17 $empty =
imagecolorallocatealpha($thumb,0x00,0x00,0x00,127);
18 imagefill($thumb, 0, 0, $empty);
19
20 // GET ORIGINAL IMAGE DIMENSIONS
21 $array = getimagesize($image_url);
22 if ($array)
23 {
24 list($image_w, $image_h) = $array;
25 }
26 else
27 {

28 die("NO IMAGE $image_url");
29 }
30
31 // ACQUIRE THE ORIGINAL IMAGE
32 $image_ext = trim(strtoupper(end(explode('.',
$image_url))));
33 switch(strtoupper($image_ext))
34 {
35 case 'JPG' :
36 case 'JPEG' :
37 $image = imagecreatefromjpeg($image_url);
38 break;
39
40 case 'PNG' :
41 $image = imagecreatefrompng($image_url);
42 break;
43
44 default : die("UNKNOWN IMAGE TYPE:
$image_url");
45 }
46
47 // GET THE LESSER OF THE RATIO OF THUMBNAIL
H OR W DIMENSIONS
48 $ratio_w = ($thumb_w / $image_w);
49 $ratio_h = ($thumb_h / $image_h);
50 $ratio = ($ratio_w < $ratio_h) ? $ratio_w : $ratio_h;
51
52 // COMPUTE THUMBNAIL IMAGE DIMENSIONS
53 $thumb_w_resize = $image_w * $ratio;
54 $thumb_h_resize = $image_h * $ratio;

55
56 // COMPUTE THUMBNAIL IMAGE CENTERING
OFFSETS
57 $thumb_w_offset = ($thumb_w - $thumb_w_resize) / 2.0;
58 $thumb_h_offset = ($thumb_h - $thumb_h_resize) / 2.0;
59
60 // COPY THE IMAGE TO THE CENTER OF THE
THUMBNAIL
61 imagecopyresampled
62 ( $thumb
63 , $image
64 , $thumb_w_offset
65 , $thumb_h_offset
66 , 0
67 , 0
68 , $thumb_w_resize
69 , $thumb_h_resize
70 , $image_w
71 , $image_h
72 )
73 ;
74
75 // SHOW THE NEW THUMB IMAGE
76 header('Content-type: image/png');
77 imagepng($thumb);
78
79 // RELEASE THE MEMORY USED BY THE
RESOURCES
80 imagedestroy($thumb);
81 imagedestroy($image);

Ví dụ về các trường hợp sử dụng:
Khi nhìn vào đoạn mã ví dụ trên, cụ thể là dòng thứ 6, chúng ta hoàn toàn có thể đặt đoạn
mã này vào thẻ image HTML. Về mặt kỹ thuật, đoạn mã trên sẽ thực hiện 3 chức năng
chính (từ dòng 9 – 12), hàm img chính là đường dẫn URL của ảnh, còn tham số w và h
đại diện cho chiều rộng - width và cao – high. Khi đem áp dụng vào những chương trình
cụ thể nào đó, nếu người sử dụng muốn lọc các giá trị này thì hãy đảm bảo đường dẫn
URL đã được trỏ chính xác tới ảnh gốc, và tham số w và h là những giá trị có thực.
Quá trình tạo nguồn dữ liệu của ảnh thumbnail:
Bước đầu tiên của chúng ta là phải tạo nguồn dữ liệu của ảnh thumbnail này (dòng 15 –
18), cụ thể là dùng hàm imageCreateTrueColor() để tạo với các tham số về kích thước
tính theo đơn vị pixel được lấy từ hàm yêu cầu GET. Ở chế độ mặc định, bức ảnh được
phủ bởi những pixel màu đen, nhưng người sử dụng lại muốn làm cho phần hình nền trở
nên trong suốt, do vậy chúng ta sẽ tiếp tục sử dụng hàm imageSaveAlpha() để gửi
“thông báo” tới thư viện GD và sử dụng toàn bộ kênh alpha, bên cạnh đó là hàm
imageColorAllocateAlpha() khi gửi tới ảnh gốc và khi trả về, chúng ta sẽ nhận được tín
hiệu của ảnh nền đã được làm trong suốt. Các bạn có thể tham khảo thêm tại đây:


/>php

Khi phần gốc của ảnh thumbnail đã hoàn tất, chúng ta sẽ tiếp tục với phần ảnh gốc. Trước
tiên là lấy thông tin width và high của ảnh bằng hàm getImageSize(), nếu các bạn gặp
lỗi tại bước này thì hãy xem lại phần đường dẫn trực tiếp của ảnh, hoặc file đang trỏ đến
không phải là file ảnh. Trong bất kỳ trường hợp này, nếu chức năng của hàm này thất bại
thì các phần mã tiếp theo cũng không thể tiếp tục, do vậy hãy kiểm tra thật kỹ tại bước
này (dòng mã 20 – 30).
Các bạn có thể tham khảo thêm thông tin chi tiết tại đây:

Bước tiếp theo các yêu cầu về định dạng file được gửi đi từ người sử dụng. Về mặt kỹ
thuật, PHP sẽ sử dụng các hàm khác nhau để tạo ảnh nguồn từ những định dạng khác

nhau được hỗ trợ, cụ thể những file input sẽ được đáp ứng là JPG và PNG, bên cạnh đó
là GIF và BMP (xem dòng mã 32). Sau đó áp dụng cấu trúc điều khiển switch/case để
chọn đúng chức năng imageCreateFrom (dòng mã 33 – 45). Trong trường hợp bạn
muốn khôi phục hoặc cải thiện khả năng xử lý lỗi, hãy tham khảo thêm ví dụ về hàm
ImageCreateFromJPEG tại đây:


Tính toán kích thước và căn chỉnh với ảnh thumbnail:
Tại bước này, chúng ta sẽ chuyển sang phần tính toán kích thước theo yêu cầu của ảnh
thumbnail so với kích thước tiêu chuẩn gốc (dòng mã 47 – 50). Do người sử dụng muốn
giữ nguyên tỉ lệ kích thước này, và vì thế các bạn sẽ áp dụng cách làm thu nhỏ tỉ lệ này,
thay vì thay đổi nó (dòng 52 – 54). Cụ thể, tại đây chúng ta sẽ làm cho phần thumbnail
này ở chính giữa trên ảnh nền đã được xử lý trong suốt, với 1 phần căn lề từ 4 phía: trên,
dưới, trái và phải. Mặt khác, chúng ta tiếp tục xử lý phần kích thước offset từ góc trên
bên trái (dòng mã 56 – 58), cụ thể hơn là chia phần offset này bằng cách kết hợp 2 quá
trình xử lý chung.
Sao lưu ảnh gốc vào nguồn thumbnail:
Sau khi hoàn tất các bước trên, bây giờ là thời điểm để copy và thiết lập lại 1 số thuộc
tính của ảnh nguồn trong phần thumbnail (xem dòng mã 60 – 73). Cụ thể, hàm
imageCopyResampled() để kết hợp và hoàn thiện quá trình này. Kể từ khi dùng ảnh gốc
thumbnail trong phần điểm đến được tạo bằng imageCreateTrueColor(), chúng ta sẽ có
được những kết quả trông rất đẹp mắt.
Các bạn có thể tham khảo thêm ví dụ mẫu tại đây:

Gửi hoặc lưu ảnh thumbnail:
Khi hệ thống bắt đầu gửi đi phần header của ảnh PNG, và tiếp tục sử dụng hàm
imagePNG() để gửi ảnh qua trình duyệt (dòng mã 75 – 77), tại đây chúng ta sử dụng
định dạng PNG bởi vì JPG không hỗ trợ hiệu ứng trong suốt, và thay vào những phần
trong suốt đó sẽ là điểm ảnh màu đen.
Tiếp đến, chắc hẳn nhiều người sẽ tự hỏi rằng: “Chuyện gì sẽ xảy ra nếu chúng ta muốn

lưu bức ảnh thay vì gửi tới trình duyệt?”. Ý tưởng này rất hay và sáng tạo, đặc biệt là khi
muốn sử dụng lại ảnh thumbnail, và quá trình này cũng khá dễ thực hiện. Hàm
imagePNG() có thể lấy tên của file làm tham số dự phòng, và khâu tiếp theo tiến hành
theo logic sẽ là tìm kiếm ảnh thumbnail, và nếu tìm được thì sẽ tiến hành gửi đi bằng lệnh
readFile(). Còn trong trường hợp không tìm được ảnh thumbnail, quá trình này sẽ
chuyển sang xử lý những thông tin thu thập được và tạo ra file PNG thay thế trên file hệ
thống của server. Các bạn có thể tham khảo thêm một số ví dụ tiêu biểu về hàm
imagePNG() này tại đây:


Về bản chất, quá trình xử lý ảnh như trên sẽ yêu cầu khá nhiều dung lượng bộ nhớ, và
bước cuối cùng của chúng ta là giải phóng phần bộ nhớ đã được sử dụng (dòng mã 80 –
hết), hoặc tham khảo thêm tại đây:

Trên đây là toàn bộ quá trình sử dụng một số hàm chức năng của PHP để tạo và xử lý
phần nguồn các file ảnh, cùng với đó là thao tác thay đổi kích thước, căn chỉnh Để tìm
hiểu kỹ hơn về quá trình này, các bạn hãy tham khảo phần ví dụ tổng hợp tại đây:

/>#104006
Chúc các bạn thành công!