Xử lý đồ họa với thư viện GD

Dạng màu của Gif được kết hợp bởi 8-bit, do đó bạn chỉ có thể có 256 màu trong một tệp ảnh duy nhất.. Tương tự như php, thư viện gd là một mã nguồn mở của boutell.com bạn có thể vào đây

Bài 22: Xử lý đồ họa với thư viện GD

Thủ thuật sử dụng thư viện GD tác giả : Dan Radigan Macromedia

Cơ Bản Graphics

Chúng ta hãy bắt đầu tìm hiểu khái niệm về tệp ảnh là gì và nó đuợc diễn đạt qua máy vi tính như thế nào Một tệp ảnh chẳng khác nào là một tập hợp của nhiều pixel hay dots bởi một màu sắc nhất định nào đó

Mọi hình ảnh đều có dạng hình chử nhật (rectangular) và có cạnh dài và ngắn nhất định, đuợc tạo bởi một matrix của pixels 100 hình mỗi hình có 300 pix sẽ có tổng số pix là

30000 pixels Trong php, hình ảnh là một hệ thống liên hợp (coordinate) Ví dụ: x bằng

300 và y bằng 100

Ở góc độ trên bên trái của hình nó sẽ luôn là (0,0) Giá trị của x tăng dần theo khi kéo chéo một đường từ góc trái xuống góc phải đối diện (x,y), cũng như giá trị y tăng dần khi kéo một đường thẳng từ trên xuống dưới(0,y).Khi cho nội dung bất kỳ vào khung ảnh nó luôn liên quan tới góc độ trái phía bên trên Nhìn ví dụ trên, góc liên hợp (180, 50) đựơc đóng lại phía tay phải của tệp hình, khoảng giữa đổ xuống

Làm một ví dụ tương tự trong đời sống, để xem hình ảnh đựơc diễn tả như thế nào Bạn hãy tưởng tượng bạn đặt 100 con cá màu vàng vào một ô có chiều cao là 10 và chiều dài cũng là 10, căn bản bạn sẽ thấy một hình vuông màu vàng Bây giờ bạn thử thay vào đó vài con cá khác màu xanh theo dạng hình chữ H bạn sẽ nhận ra ngay chữ H xanh trong một khung hình vàng Chúc mừng bạn, bạn đã tạo một tệp ảnh động rồi đó

Một điểm cần chú ý nữa đó là transparency (vô sắc).Transparency có khả năng tẩy

„clear“ pixel Trong trường hợp bạn muốn giấu mấy con cá vàng, bạn chỉ cần đổi chúng thành vô sắc, sau đó bạn chỉ còn thấy chữ H màu xanh bao bọc bởi một màu trắng do transparency kết nối lại với nhau

Image-formate

Cấu trúc, được html hiện thị lên web-site để biểu diễn hình ảnh luôn là một liên đới tĩnh (relativ statisch ) Dạng hình đã thay đổi chút ít trong những năm qua 3 dạng hình quan trọng thường đựơc dùng là gif, jpeg, png

GIF được viết tắc từ Graphics Interchange Format Vài năm trước đây gif rất được sử dụng phổ biến, bởi tính năng vô sắc ( transparency ) của nó Dạng màu của Gif được kết hợp bởi 8-bit, do đó bạn chỉ có thể có 256 màu trong một tệp ảnh duy nhất

Do ảnh hưởng của sức chứa màu, ảnh Gif chủ thích hợp với những khung có diện tích lớn

Trong những năm gần đây Unisys Corporation, chủ quyền của LZW compression, người toàn quyền về việc sử dụng dạng hình gif, đã mất quyền chuyên giữ (patent) vào khoảng tháng 6 2003, nên giới sử dụng dạng gif cũng giảm xuống rất nhiều

JPEG, Joint Photographic Experts Group, một dạng hình thích hợp cho ảnh chụp.Dạng

jpeg không có vô sắc màu, nên nó không thích hợp với các toolbars hay Form không có góc cạnh

PNG, Portable Network Graphics, một dạng dình mới được hổ trợ bởi nhiều trình duyệt PNG có nhiều điểm lợi gần như của gif cộng cả tính vô sắc màu Điểm cần chú ý PNG không biểu hiện rỏ ràng trên trình duyệt của netscape 4, nhưng mọi trình duy hiện tại đều diễn đạt tốt Bạn nên thử loại hình này trong mọi trình duyệt xem nó có thích ứng không Thủ thuật biến đỏi ảnh bằng PHP

GD là một ANSI-C thư viện cho việc tạo lập hình ảnh động Tương tự như php, thư viện

gd là một mã nguồn mở của boutell.com bạn có thể vào đây để tải nó xuống nếu trong php chưa có thư viện này ( tôi nghĩ rằng không, php đã cài sẳn nó rồi, cảm ơn trời

phật :-))

Installation thư viện GD: chỉ nói ngắn gọn

xem trong file php.ini Tìm dòng ;extension=php_gd2.dll bỏ dấu „ ; „ và start apache là

ok Muốn cho chắc chắn thì vào trình duyệt gọi tệp này <?php phpìno() ; ?> xem tv GD

đã bật chưa

GD-API bao gồm nhiều function, giúp bạn tạo, sửa các tệp tin hình ảnh qua lập trinh php.API rất bao la và không chỉ vỏn vẹn trong phần tạo ứng nhỏ trong bài này Chúng ta tập trung vào 4 điểm quan trọng :

-Phương thức cơ bản (basic funtions)

-Sảo thuật màu (color manipulation)

-Vẽ hình (drawing primitive shapes)

-Vẽ chữ ( working with text)

the basic function

Chúng ta bắt đầu với cốt lõi của function và dùng nó để tạo hình trong bất kỳ server-graphic nào Function này sẽ nạp (load ) hình từ máy, lưu giử vào bộ phận nhớ ( memory) sau đó ghi hình vào đĩa cứng (disk) hay chuyển (streaming) đến trình duyệt

Creating Images

Bạn có thể dùng function imagecreate () để tạo một nguồn ảnh mới để chỉnh đổi Cách gọi : Ressource imagecreate (int x_size, int y_size)

Function imagecreate() trả lại cho chúng ta nguồn (resource) tương đương với ảnh hình giống như cú pháp của mysql mysql_connect() trả cho chúng ta một mảng dử liệu

( recordset), nhưng bạn không thể sử lý trực tiếp vào biến này được, ở đây có liên quan đến funtion làm biến đổi hình ảnh, do đó nó sẽ vận chuyển source của ảnh đến funtion image để làm việc này Function sẽ cho ta kết quả của ảnh ở độ phân giải x_size và y_size

Sử dụng ảnh đã có (Using Existing Images)

Để tạo một ảnh trống (blank image) , chúng ta có thể lấy ảnh từ disk qua các funtions sau: resource imagecreatefromjpeg (string filename) // ảnh dạng jpeg

Ressource imagecreatefrompng (string filename) // ảnh dạng png

Nhiều tương tự như funtion imagecreate() 2 Funtions này trả cho ta giá trị của nguồn ảnh tương đương với tệp ảnh trong disk , nếu nó là true Nguợc lại funtion trả một chuỗi trống ( empty string) nếu là false Nếu fopen-wrappers' được bật lên ( có thể chỉnh sửa trong tệp tin php.ini) bạn có thể dùng URL như tên của tệp ảnh

Nhưng coi chừng máy sẽ chạy chậm đi vì phải tìm chất liệu qua HTTP Mỗi khi 1 chức

năng dùng URL thay vì một hồ sơ trên đĩa, chức năng script phải tìm qua mạng lưới Vì qua mạng lúc nào cũng chậm hơn là đi thẳng từ đĩa nên máy chạy chậm đi là 1 quan tâm

ở đây

fopen_wrappers chạy tốt với php trên nền unix và cũng được chỉnh sửa trên nền

Windows kể từ phiên bản (vers.) 4.3

Truy tìm kích thước của tệp ảnh ( Finding an Image's Size)

Rất nhiều điểm lợi khi ứng dụng web cho ta biết kích thước của ảnh Chúng ta có thể sử dụng thông tin này:ví dụ cần kích thước chính xác của ảnh để làm một popup-window cho một thư viện ảnh hoặc đặt ảnh theo chiều cao, rộng trong <img>tag

Array getimagesize ( string filename [, array imageìno])

funtion getimagesize() trả về cho ta 4 phần tử (elements) array là:

element 0: độ ngang của ảnh trỏ về tham số pixels của tệp ảnh

element 1: độ cao của ảnh trỏ về tham số pixels của tệp ảnh

element 2: trị số (interger) tương đương cho loại ảnh (typ image) (1=gif, 2=JPG, 3=PNG) element 4: chuỗi gắn thêm (add) vào <img>tag để biểu hiện độ cao rộng, vd: „height=100 width=200“

Tham số (parameter) của tệp ảnh dự bị được chuyển đưa đến dãy array nhằm lấy thêm những thông tin của ảnh Khi họat động nó trả lại một JPG APP (nhờ thằng google nó giải thích giùm là cái gì nhá) khác nằm trong một associative array

Truy lùng độ phân giả cao rộng ( retrieving the width and height)

Nếu chúng ta cần đến độ cao rộng của ảnh chúng ta không cần đo thông tin ảnh trong mãng array một cách khó khăn

Chúng ta có thể sử dụng funtion imagesx() và imagey() để truy tìm độ cao rộng của tệp ảnh

Int imagex ( resource image)

Int imagey ( resource image)

Như đã thấy funtions imagex và imagey trả cho ta giá trị của độ cao và rộng của tệp ảnh Cũng cần lưu ý function này không giống như function getimagesize trên 2 functions này chỉ lấy nguồn ảnh (resource) , chứ không phải đường dẫn của ảnh (file path) Muốn tạo ảnh bạn nên dùng funtion imagecreate() trước sau đó đến 2 function imagex() và

imagey() để lấy tham số của ảnh do imagecreate() tạo

Copy và Bóp ảnh ( copy & resizing an a image)

Chúng ta có thể dùng coy và resize để tạo ảnh mới Function này rất lợi cho việc làm thư viện hình ảnh như thubmnails

int imagecopyresized (resource dst_im, resource src_im,

int dstX, int dstY,int srcX, int srcY,

int dstW, int dstH, int srcW, int srcH)

Function này copy phần góc (rectangular) của nguồn ảnh và trao trả chúng đến đích của ảnh thật

dst_im, src_im – the destination and source image resources

int dstX, int dstY – the upper-left corner of the replaced content in the destination image int srcX, int srcY – the upper-left corner of the source content in the source image

int dstW, int dstH – the width and height of the rectangular area to replace in the

destination image

int srcW, int srcH – the width and height of the rectangular area to copy in the source image

Nếu trong phạm vi góc thì không tương ứng với độ cao rộng trong khoảng giữa nguồn ảnh và đích ảnh Function này họat động tương đối nó có thể copy từng vùng (regions) với cùng lọai ảnh (same image) (vd: dst_im tuơng ứng với src_im ) Tuy nhiên nếu vùng ảnh(régions) nằm trên vùng đã có kết quả (results) thì ta không thể liệu trước được

Cho ảnh hiệ thị trên trình duyệt ( outputting to the browser)

Khi đã chỉnh sửa ảnh xong, chúng ta cần tìm giải pháp cho ảnh hiện trên trình duyệt Để làm việc này chúng ta dùng function imagepng() and imagejpeg()

int imagepng (resource image [, string filename])

int imagejpeg (resource image [, string filename])

function này xuất dữ liệu nguyên thủy (raw) của ảnh đến trinh duyệt Nếu nguồn ảnh là một tên tệp (file name) , nó sẽ được ghi chép mọi thông tin vào tệp ảnh Tên tệp phải nằm trong đĩa cứng (disk) và php phải có toàn quyền (chmod 777) để sao chép tin tệp Ta cần dùng funtion header() trong trình duyệt khi muốn đưa ảnh hiện thị

Xóa bỏ bộ nhớ ( Reclaiming used Memory)

Sau giao chuyển hình đến trinh duyệt chúng ta cần loại bỏ đi phần tồn trong bộ phận nhớ qua function : imagedestory()

int imagedestory ( resource image)

Cách sử dụng căn bản

Để dùng function này chúng ta cần tạo một thubmnail để nạp (load) hình và kéo nhỏ xuống 1/8 so với ảnh nguyên thủy , kế đến lưu vào đĩa

PHP Code:

<?php

//load the image into memory and get its properties

$img = imagecreatefrompng("goldengate.png");

$imgsz = getimagesize("goldengate.png");

//create new image for thumbnail 1/8 the size of the original

$thumb = imagecreate($imgsz[ ]/8, $imgsz[ ]/8);

//shrink the original image to 1/8th its size

imagecopyresized($thumb, $img, 0, 0, 0, 0,

$imgsz[ ]/8, $imgsz[ ]/8, $imgsz[ ], $imgsz[ ]);

//write the thumbnail to disk

imagepng($thumb, "goldengate_thumb.png");

//get the image size of the thumbnail for use in the HTML below

$thumbsz = getimagesize("goldengate_thumb.png");

//free resources occupied by the images

imagedestroy($img);

imagedestroy($thumb);

?>

<html>

<body>

<img src="goldengate.png" <?php echo $imgsz[ ] ?> >

<img src="goldengate_thumb.png" <?php echo $thumbsz[ ] ?> >

</body>