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

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 . 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 
src="RAY_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!