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   src="RAY_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 - awidth 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:

http://php.net/manual/en/function.imagecreatetruecolor.php

http://php.net/manual/en/function.imagesavealpha.php

http://php.net/manual/en/function.imagecolorallocatealpha.php

http://php.net/manual/en/function.imagefill.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 awidth 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:

http://php.net/manual/en/function.getimagesize.php

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:

http://php.net/manual/en/function.imagecreatefromjpeg.php

http://php.net/manual/en/function.imagecreatefrompng.php

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:

http://php.net/manual/en/function.imagecopyresampled.php

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:

http://php.net/manual/en/function.imagepng.php

http://php.net/manual/en/function.readfile.php

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:

http://php.net/manual/en/function.imagedestroy.php

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:

http://php.net/manual/en/image.examples.php

http://us3.php.net/manual/en/function.imageconvolution.php#104006

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