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

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ố 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:

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 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:

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!

Các lý do cần đọc trước khi quyết định liên hệ tôi 

  1. Tham gia group Mua bán Google Ads và Google Shopping :

    https://www.facebook.com/groups/314513929300715

  2. Tham gia group mua bán cho thuê tài khoản BM Agency :

    https://www.facebook.com/groups/1204318359703229

  3. AGOLA chỉ cung cấp dịch vụ không có dịch vụ tư vấn hiểu tới đâu bán tới đó !
  4. AGOLA ngừng cung cấp các gói dịch cho bọn có Slogan " Tuần đổi xe tháng mua nhà " hoặc liên quan !
  5. Các dịch vụ liên quan đến hướng dẫn : diễn ra từ 5-30 phút thông qua teamview hoặc ultral thời gian càng ngắn giá tiền càng cao nên các bạn đọc kỹ trước khi sử dụng
  6. Các sản phẩm dịch vụ không có thương thảo giá và cũng không có hỏi thêm
  7. Không làm việc với mấy thằng giao lưu với lũ suốt ngày dùng VPS remote này remote kia sock này sock kia đổi ngôn ngữ này đổi ngôn ngữ kia add page này sang page kia đổi đá cá kiểu con đà điều ... đây là một lũ ngu thời hiện đại khi bạn muốn vượt rào vòng đầu bạn đã gian lận thì vượt vào đít kèm với đó khả năng dính liên đơi nghi ngờ hành vi bất thường là rất cao nó như kiểu hành vi của bạn có tần xuất giống như hành vi của bọn gian lận khá nhiều nó cho bạn vào động cơ gian lận có nguy cơ nó sẽ pem luôn nhé ... và ti tỷ lý do khác nhé nếu bọn mày mà làm theo tụi nó lên cam được tao cho 20 triệu tiền cafe cà pháo
  8. Không bán vĩnh viễn mọi dịch vụ mua nhầm đòi đổi sang gói dịch vụ khác
  9. Thông tin bảo hành gần như không có nhưng cũng có một số dịch vụ có bảo hành đề nghị đọc kỹ trước khi quyết định mua
  10. Quyết định mua hàng là đồng ý các điều khoản mua bán và điều khoản không được lấy lại tiền và không bồi hoàn
  11. Mua hàng thì xin đọc kỹ điều khoản ở từng mô tả trước khi quyết định nhấc máy liên hệ ở thông tin của từng gói dịch vụ
  12. Mọi giao dịch đều được phải bắt buộc chụp màn hình chuyển khoản gửi vào Zalo
  13. Các đối tượng cố ý chuyển tiền gói này để trục lợi sử dụng gói khác đều được coi là hình vi lừa đảo ! Cố ý ghi nội dung hiểu lầm về chuyển tiền để đôi co đòi sử dụng gói dịch vụ khác cũng vậy !
  14. Tôi là dân khối A nên việc viết sai lỗi chính tả thì kệ mẹ tôi thích thì mua không thích thì đừng soi đi ra chỗ khác do tôi không có soát lại chính tả nên các bạn đọc thay vì thắc mắc thì thông cảm giùm tôi ! miễn sao tôi truyền tải thông tin bạn đọc bạn thấy hiểu được bạn sử dụng không được bạn tìm bên khác
  15. Tôi không làm việc với bọn cử nhân viên là các công ty Agency , truyền thông gọi hỏi dò hỏi luyên thuyên ! Nếu cố tình tôi sẽ dùng CRM Agency cấm lock chạy Ads vĩnh viễn khi nhìn thấy đuôi theo rõi của doanh nghiệp đó mà tôi đã gán.
  16. Tôi không làm việc với bọn nào thì tôi chạy tiền tỷ tôi tiêu tiền tỷ nhưng chạy demo trước nếu ngon thì vít lớn nhưng sau 3 ngày thuê thấy đéo thấy như cam kết về ngân sách
  17. Tôi không hợp tác ăn chia hay kiểu Win Win đôi bên có lợi
  18. Tất cả những câu hỏi khi gọi điện khiến tôi nghĩ rằng bạn chưa đọc kỹ thông tin trên website sẽ được tôi từ chối vô điều kiện
  19. Không làm việc các công ty có các nhân vật nổi tiếng trên các đài báo truyền hình bởi vậy bớt quảng cáo
  20. Các đối tượng cố tình lên mạng tìm kiểm thông tin tôi và không có trao đổi được tôi dùng Zalo : O9O9.456.866 gửi STK thông tin thanh toán của tôi qua zalo đó mà vẫn chuyển tiền vào tài khoản của tôi được coi là hình vi lừa đảo cố tình trọc phá và lợi dụng sử dụng lừa đảo để mong muốn sử dụng dịch vụ của tôi nhưng vì cấm nên phải làm vậy
  21. Kiến thức của đại đa số dân trên mạng không sai mà chỉ đúng với bọn gà mờ mà thôi kiểu như bạn học lớp 1 cô giáo nói 1 không trừ được cho 2 lên cấp 2 cô giáo nói 1 trừ được cho 2 ! Lúc đó cô giáo cấp 1 hay thầy giáo cấp 2 không nói ai đúng ai sai được mà tại thời điểm đó bạn thấy nó đúng còn khi đi sâu vào nó đéo đúng 😀 ! Cũng như việc tôi bán dịch vụ cho dân trong nghề việc tôi có bắt mấy thằng cấp 1 nuốt kiến thức chuyên sâu của cấp 2 là không được bởi vậy dân nào hiểu sẽ liên hệ mua chứ đừng kiểu lơ mở hỏi cho vui cửa vui nhà
  22. Không làm việc với bọn hở miệng ra là em từng có BM2500 với BM1000
  23. Không lamg việc với bọn hở mồm ra là fake mà đến cái via kiểm tra như thế nào là 1 cái via Việt hay via us... cũng đéo biết kiểm tra thế mà cứ đi nghe mấy thằng trên mạng Fake Ip , Fake đổi ngôn ngữ này ngôn ngữ kia ... tùm lum tà la login đổi via các kiểu con đa điểu rồi nghe thì vui tai mà làm cũng được không đéo có biết lý do chỉ có lý do vớ vẩn - Không tin tao đố bọn mày hỏi thử nó 1 câu via Việt là như thế nào đố thằng đó biết đó xàm xí - hay via việt là thông tin Việt Nam hahaha !
  24. Không làm việc với bọn nào thì đổi mạng 4g kết nối này kết nối kia lên cam có con cặc ấy mấy cái công nghệ cổ lỗ sĩ này bọn code tool click quảng cáo nó sài gần 10 năm nay rồi lòe dân gà hoài dần dần ko hiệu quả bọn nó ko dùng rồi lũ đó biến mất khỏi thị trường bán tài khoản
  25. Quyết tâm cấm log mọi thằng liên quan tới BM2500 vĩnh viễn hạn chế tài khoản quảng cáo liên đới từ 6 tới 2 năm kể cả cho kháng XMDT theo tút trên mạng
  26. Tiếp tục sắp tới sẽ thanh lọc toàn bộ Invoice
  27. Bọn mày nghĩ xem mẹ chúng nó giỏi vậy nhận hàng về mà chạy quảng cáo đi giàu hơn ko sao phải đi kiếm tiền dạy học ba láp ba xàm đó xem thấy quảng cáo của tụi đó trước đây chạy quảng cáo tràn lan quảng bá khóa học như đúng rồi giờ chạy đi ba láp ba xàm

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Call Now Button
X