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

Quá trình xử lý ảnh thumbnail với PHP
Quản Trị Mạng - 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
AY_EE_image_thumbnail.php?img=RAY_test_image_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:




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:


Chúc các bạn thành công!

T.Anh (theo Expert Exchange)