Στο άρθρο αυτό βλέπουμε βασικές δυνατότητες που προσφέρουν σήμερα οι πιο γνωστές βιβλιοθήκες επεξεργασίας εικόνας και στη συνέχεια δίνουμε πρακτικά βασικά παραδείγματα χρήσης στη γλώσσα προγραμματισμού PHP.

Πριν προχωρήσουμε με τις βιβλιοθήκες επεξεργασίας εικόνας, μια απορία που εύλογα μπορεί να προκύψει είναι «Ποιά η χρησιμότητα τέτοιων βιβλιοθηκών, αφού σήμερα έχουμε στη διάθεσή μας ισχυρότατα προγράμματα όπως το Gimp, το Photoshop και πολλά άλλα για επεξεργασία εικόνας; Τί τις θέλει κανείς αυτές τις βιβλιοθήκες λοιπόν;»

Οι βιβλιοθήκες αυτές έρχονται να εξυπηρετήσουν τις ανάγκες επεξεργασίας εικόνας, είτε σε μια εφαρμογή που αναπτύσσετε είτε κατά τη μαζική επεξεργασία μεγάλου αριθμού εικόνων.

• Έχετε ποτέ χρειαστεί να κάνετε αυτόματα αλλαγή μεγέθους σε μια εικόνα που ανεβάζουν οι χρήστες σε ένα δυναμικό website που αναπτύσσετε;
• Να αλλάξετε format σε μια τέτοια εικόνα (π.χ. από JPG να την κάνετε PNG);
• Να δημιουργήσετε ένα αντίγραφο μικρών διαστάσεων (thumbnail) αυτής της εικόνας;
• Να βάλετε ένα πλαίσιο, να προσθέσετε ένα υδατογράφημα ή να κάνετε ασπρόμαυρη μια τέτοια εικόνα;
• Να βάλετε σκιές, effects, να αλλάξετε επέμβετε στην ισορροπία χρωμάτων / στο ιστόγραμμα;
• Να κάνετε τα παραπάνω εύκολα και γρήγορα για εκατοντάδες εικόνες σας «με μια κίνηση»;

Οι βιβλιοθήκες

Οι βιβλιοθήκες επεξεργασίας εικόνας (image processing) υποστηρίζουν την ανάγνωση και την εγγραφή δεκάδων formats εικόνων ενώ προσφέρουν πολλές και ισχυρότατες δυνατότητες επεξεργασίας.

Οι περισσότερες γνωστές βιβλιοθήκες σήμερα συνοδεύονται από command line εργαλεία (εντολές για την κονσόλα του UNIX ή το command prompt των Windows χωρίς γραφική διεπαφή) για την άμεση χρήση τους. Tαυτόχρονα προσφέρουν και επεκτάσεις / προγραμματιστικές διεπαφές (programming interfaces) για πολλές γλώσσες προγραμματισμού (π.χ. C/C++, Perl, PHP, Windows COM, Python, Tcl, Ruby, Tcl, Lisp κ.α.). Ως βιβλιοθήκες προσφέρονται σε πολλά λειτουργικά συστήματα, όπως στα UNIX/UNIX-like (π.χ. Linux, *BSD), στα Windows και στο MacOS-X.

Στο ευρύτερο σετ δυνατοτήτων που προσφέρουν οι βιβλιοθήκες, περιλαμβάνονται τα:

• μετατροπή εικόνας από ένα format σε ένα άλλο (π.χ. TIFF σε JPG)
• resize, rotate, crop
• επεξεργασία χρωμάτων
• εφαρμογή effects (π.χ. sharpen, σκιές κ.α.)
• δημιουργία thumbnails
• δημιουργία animated GIF
• συνδυασμός πολλών εικόνων σε μία
• προσθήκη κειμένων και σχεδιασμό σχημάτων πάνω σε μια εικόνα

Οι πιο διάσημες σήμερα Open Source βιβλιοθήκες επεξεργασίας εικόνας είναι οι:

• ImageMagick (http://www.imagemagick.com)
• GraphicsMagick (http://www.graphicsmagick.org)
• GD (http://www.libgd.org)
• NetPBM (http://netpbm.sourceforge.net)

Ποιά να χρησιμοποιήσω;

Εάν χρησιμοποιείτε PHP σε κάποιον shared server, κατά πάσα πιθανότητα δεν θα έχετε στη διάθεση σας όλες αυτές τις βιβλιοθήκες. Σε αρκετές περιπτώσεις πιθανόν να έχετε μόνο μία – τη GD – και αν ζητήσετε τη διάθεση περισσοτέρων ενδέχεται να μην σας εξυπηρετήσουν.

Στην περίπτωση που υπάρχουν στο σύστημά σας περισσότερες από μια βιβλιοθήκες, σημαντικό είναι να προσέξετε τις εκδόσεις οι οποίες σας προσφέρονται. Υπάρχει περίπτωση οι λειτουργίες που σας ενδιαφέρουν να μην υποστηρίζονται σε συγκεκριμένες εκδόσεις. Κάθε βιβλιοθήκη έχει διαφορετική ποιότητα και ταχύτητα στις λειτουργίες της.

Σε γενικές γραμμές, κατά τη συγγραφή αυτού του άρθρου, στις τελευταίες εκδόσεις τους οι βιβλιοθήκες προσφέρουν σχετικά κοινά αποτελέσματα ως προς την ποιότητα (παλαιότερες εκδόσεις της GD υστερούν σημαντικά σε σχέση με τις υπόλοιπες βιβλιοθήκες στην ποιότητα).

Ακολουθούν μερικές σημειώσεις που πιθανόν να σας διευκολύνουν στην επιλογή σας, αν και πάντοτε είναι και θέμα προσωπικών προτιμήσεων:

GD

Η GD είναι η πιο εύκολη για να ξεκινήσετε άμεσα να τη χρησιμοποιείτε στην περίπτωση της PHP σήμερα. Ειδικά για την περίπτωση της GD, οι εκδόσεις 1.x δεν προσφέρουν πραγματική υποστήριξη truecolor (εκατομμύρια χρώματα) με συνέπεια πολύ χαμηλής ποιότητας αποτελέσματα (π.χ. σε φωτογραφίες) σε σχέση με τις υπόλοιπες βιβλιοθήκες. Επίσης, υποστήριξη GIF δεν υπήρχε στη GD στις εκδόσεις από 1.6 έως 2.0.28. Η GD στην περίπτωση χρήσης μέσω PHP μπορεί να είναι πιο γρήγορη από τις άλλες βιβλιοθήκες, επειδή η υποστήριξη για αυτή είναι συνήθως compiled (ενσωματωμένη) στην PHP. Η GD είναι πιο επιρεπής σε σφάλματα από ότι οι υπόλοιπες βιβλιοθήκες.

ImageMagick/GraphicsMagick

Η GraphicsMagick βασίστηκε αρχικά στην ImageMagick και έτσι έχουν πολλά κοινά. Η ImageMagick είναι πολύ ισχυρή, στοιβαρή, ώριμη και πολύ καλά δοκιμασμένη βιβλιοθήκη. Η GraphicsMagick λειτουργεί σε πολλές περιπτώσεις πιο γρήγορα από την ImageMagick. Οι βιβλιοθήκες ImageMagick/GraphicsMagick προσφέρουν το πλουσιότερο σετ δυνατοτήτων και σε πολλές περιπτώσεις μεγάλη ευχρηστία ώστε εύκολα να έχετε τα αποτελέσματα που θέλετε.

Εγγενή υποστήριξη για την GraphicsMagick και την ImageMagic στην PHP προσφέρει το PECL/PEAR package «imagick» (http://pecl.php.net/package/imagick) και υποστήριξη για το ImageMagick προσφέρει και το module MagicWand (http://www.magickwand.org/). Το API του MagicWand είναι σε αρκετές περιπτώσεις πιο δύσχρηστο από το αντίστοιχο της GD.

Αν δεν υπάρχουν τα 2 παραπάνω API (Application Programming Interfaces), τότε αρκεί η εκτέλεση των command line εργαλείων μέσω της PHP (π.χ. εντολές convert, combine, gm). Η χρήση των command line εργαλείων μέσω της PHP καθιστά πολύ εύκολη την επεξεργασία εικόνας, δεδομένου ότι τα εργαλεία αυτά είναι πολύ εύχρηστα. Σε πολλές περιπτώσεις (όπου για παράδειγμα ο φόρτος της εφαρμογής σας το επιτρέπει) αυτή η μέθοδος είναι η απλούστερη και η πιο ισχυρή.

NetPBM

Το NetPBM σήμερα λέγεται πως δίνει καλύτερα αποτελέσματα από πλευράς ποιότητας σε σχέση με τα υπόλοιπα. Αποτελείται από περισσότερα από 220 προγράμματα (command line) που εξυπηρετούν την επεξεργασία εικόνας. Στην περίπτωση της PHP σήμερα, ο ενδεδειγμένος τρόπος χρήσης της NetPBM είναι η εκτέλεση αυτών των command line εργαλείων.

Πρακτικά Παράδειγματα

Στο πλαίσιο του άρθρου θα εξετάσουμε 2 απλά παραδείγματα:

• τη δημιουργία μικρογραφίας (thumbnail) μιας φωτογραφίας
• την προσθήκη υδατογραφήματος σε μια φωτογραφία

με τη βιβλιοθήκη GD και με την κλήση των command line εντολών του ImageMagick.

Η GD και η ImageMagick είναι που απαντώνται πιο συχνά σε ένα περιβάλλον shared hosting με PHP και μπορείτε με αυτά τα παραδείγματα να πάρετε μια πρώτη εμπειρία από τη χρήση των βιβλιοθηκών επεξεργασίας εικόνας.

Στα παραδείγματά μας θα επεξεργαστούμε τη φωτογραφία/δείγμα:

την οποία σε όλα τα παραδείγματα έχουμε ήδη αποθηκευμένη για λόγους ευκολίας στον ίδιο κατάλογο με το αρχείο .php που παράγει το επιθυμητό αποτέλεσμα (έστω υπό το filename «sample_photo.png»).

Εξασφαλίστε ότι o Web server (στον οποίο λειτουργεί η PHP) μπορεί να γράψει στον κατάλογο όπου βρίσκονται οι φωτογραφίες στον server (για παράδειγμα, αν το php script και οι φωτογραφίες βρίσκονται στον κατάλογο ‘examples’, σε UNIX servers μπορείτε να κάνετε τον κατάλογο: chmod 777 examples), ώστε να αποθηκεύονται με τα παραδείγματα οι παραγώμενες φωτογραφίες.

GD

Δημιουργία thumbnail

Σε πρώτο βήμα θα δούμε τη δημιουργία μιας νέας φωτογραφίας μικρότερου μεγέθους (thumbnail). Τη νέα φωτογραφία (thumbnail) η PHP θα τη δημιουργεί στον ίδιο κατάλογο με την αρχική φωτογραφία («sample_photo.png») και θα έχει όνομα «new_photo.png».

O κώδικας της σελίδας/script για τη δημιουργία του thumbnail: (π.χ. example_gd.php):

<?php

//open original PNG photo (in memory)
$original_photo = ImageCreateFromPNG("sample_photo.png") 
                  or die ("can not open original photo");

//get original image dimensions
list($original_width, $original_height) = GetImageSize("sample_photo.png") 
                                          or die ("can not open original photo");

//create a new photo (in memory)
//dimensions: 100 x 75
$new_photo = ImageCreateTrueColor( 100,75 );

//copy $original_photo to $new_photo - resizing original image
ImageCopyResized($new_photo, $original_photo, 0,0,0,0,
                 100,75, $original_width, $original_height);

//write new_photo to file
ImagePNG($new_photo, "new_photo.png") or die ("can not write new photo");

//destroy in memory images
ImageDestroy($new_photo);
ImageDestroy($original_photo);

?>
<html>
<head><title>examples of gd</title></head>
<body>

Original:<br><img src="sample_photo.png"><br>
New:<br><img src="new_photo.png"><br>

</body>
</html>

H γραμμή

$original_photo = ImageCreateFromPNG("sample_photo.png")

ανοίγει τη φωτογραφία και μας επιστρέφει το αναγνωριστικό αυτής στη μεταβλητή $original_photo.

Η γραμμή

list($original_w, $original_h) = GetImageSize("sample_photo.png")

επιστρέφει τις διαστάσεις πλάτος ($original_w) και ύψος ($original_h) της αρχικής φωτογραφίας.

Η γραμμή

$new_photo = ImageCreateTrueColor( 100,75 );

δημιουργία μια νέα «κενή» εικόνα διαστάσεων 100 x 75 με εκκατομύρια χρώματα (TrueColor) στη μνήμη και επιστρέφει το αναγνωριστικό της.

Η γραμμή

ImageCopyResized($new_photo,$original_photo,0,0,0,0,100,75,$original_w,$original_h);

αντιγράφει την $original_photo στην «κενή» $new_photo. Συγκεκριμένα η αντιγραφή γίνεται στο σημείο (0,0) της $new_photo (πάνω αριστερή γωνία) ξεκινώντας από το σημείο (0,0) της αρχικής. Η αντιγράφεται γίνεται ως το σημείο (100,75) της $new_photo για τις διαστάσεις ($original_w, $original_h) της αρχικής, αλλάζοντας ταυτόχρονα τις διαστάσεις της φωτογραφίας.

H γραμμή

ImagePNG($new_photo, "new_photo.png") or die ("can not write new photo");

γράφει τη νέα $new_photo στον κατάλογο του server σε PNG format, υπό το filename «new_photo.png».

Οι γραμμές

ImageDestroy(...);

απελευθερώνουν τη μνήμη που χρησιμοποιούν οι 2 φωτογραφίες.

Αποτελέσματα

Η νέα φωτογραφία «new_photo.png» είναι:

Αντικαθιστώντας την κλήση της ImageCopyResized():

ImageCopyResized($new_photo, $original_photo, 0,0,0,0,
                 100,75, $original_width, $original_height);

με την συνάρτηση ImageCopyResampled() ως εξής:

ImageCopyResampled($new_photo, $original_photo, 0,0,0,0,
                 100,75, $original_width, $original_height);

τότε η νέα φωτογραφία «new_photo.png» είναι καλύτερη ποιοτικά:

λόγω της δειγματοληψίας που γίνεται με τη συνάρτηση ImageCopyResampled() εκτός από την αλλαγή διαστάσεων στην αρχική εικόνα που κάνει η ImageCopyResized().

Δημιουργία υδατογραφήματος

Στο παράδειγμα αυτό θα χρησιμοποιήσουμε ως υδατογράφημα μια δεύτερη εικόνα «watermark.png»:

ώστε να υδατογραφήσουμε την φωτογραφία δείγμα (*»sample_photo.png»). Το παραγώμενο αποτέλεσμα θα το πάρουμε σε format JPEG ποιότητας 90/100.

Την εικόνα «watermark.png» την αποθηκεύουμε στον ίδιο κατάλογο με την «sample_photo.png». Σε αυτήν έχει χρησιμοποιηθεί και διαφάνεια (το φόντο της εικόνας πίσω από τα γράμματα).

O κώδικας της σελίδας/script για τη δημιουργία της υδατογραφημένης φωτογραφίας: (π.χ. example_gd.php):

<?php
//open original PNG photo (in memory)
$original_photo = ImageCreateFromPNG("sample_photo.png") 
                     or die ("can not open original photo");

// Turn on alpha blending
ImageAlphaBlending($original_photo, true); 

//get original image dimensions
list($original_w, $original_h) = GetImageSize("sample_photo.png") 
                         or die ("can not open original photo");

//create watermark image
$watermark = ImageCreateFromPNG("watermark.png") 
             or die ("can not open watermark");

//get watermark dimensions
list($wtm_w, $wtm_h) = GetImageSize("sample_photo.png")
                       or die ("can not open original photo");

$wtm_x = $original_w - $wtm_w;  
$wtm_y = $original_h - $wtm_h;  

//copy $original_photo to $new_photo - resizing original image
ImageCopy($original_photo, $watermark, 10, 10,0,0,$wtm_w, $wtm_h);


//write new_photo to file (jpg, 90% quality)
ImageJPEG($original_photo, "new_photo_wm.jpg", 90) 
              or die ("can not write new photo");

//destroy in memory images
ImageDestroy($watermark);
ImageDestroy($original_photo);
?>
<html>
<head><title>examples of gd</title></head>
<body>

Original:<br><img src="sample_photo.png"><br>
New:<br><img src="new_photo_wm.jpg"><br>

</body>
</html>

Σχολιάζουμε τις γραμμές που διαφοροποιούνται από αυτές του προηγούμενου παραδείγματος:

Η γραμμή

ImageAlphaBlending($original_photo, true);

ενεργοποιεί το Alpha Channel στην εικόνα, ώστε εκτός χρώματος να χρησιμοποιούνται και πληροφορίες διαφάνειας (alpha channel). Απαραίτητο ώστε να υποστηρίζεται διαφάνεια (transparency) στην εικόνα.

Στη γραμμή

ImageCopy($original_photo,$watermark,10,10,0,0,$wtm_w, $wtm_h);

αντιγράφουμε την εικόνα $watermark στην εικόνα $original_photo. Η αντιγραφή θα γίνει στο σημείο (10,10) της $original_photo. Αντιγράφεται από την εικόνα $watermark η περιοχή που ορίζεται από το σημείο (0,0) ώς το σημείο ($wtm_w, $wtm_h), δηλαδή αντιγράφεται όλη η εικόνα $watermark.

Η γραμμή

ImageJPEG($original_photo, "new_photo_wm.jpg", 90) or die ("...");

αποθηκεύει σε format JPEG την εικόνα $original_photo (το αποτέλεσμα) στο δίσκο, υπό το filename «new_photo_wm.jpg». Η ποιότητα της προς αποθήκευση JPG είναι 90/100.

Αποτελέσματα

Η νέα υδατογραφημένη φωτογραφία “new_photo_wm.jpg” είναι:

ImageMagick

Στη συνέχεια εξετάζουμε τα 2 παραπάνω παραδείγματα με χρήση του ImageMagick. Συγκεκριμένα, χρησιμοποιούμε τον ιδιαίτερα εύχρηστο τρόπο κλήσης των command line εργαλείων του ImageMagick μέσω της PHP.

Στα παραδείγματα βλέπουμε πρώτα την κλήση των εντολών που παράγουν το επιθυμητό αποτέλεσμα στο κέλυφος (UNIX shell ή Windows Command Prompt – εκτός PHP) και μετά καλούμε τις εντολές αυτές μέσω PHP.

Δημιουργία thumbnail

Για τη δημιουργία ενός thumbnail διαστάσεων 100×75 σε αρχείο τύπου PNG, αρκεί να καλέσουμε στο κέλυφος την εντολή «convert» ως εξής:

$  convert -thumbnail 100x75 sample_photo.png new_photo_thumb_im.png

στην εντολή αυτή δίνουμε ως input εικόνα το αρχείο «sample_photo.png» και το παραγώμενο αρχείο έχει όνομα: «new_photo_thumb_im.png».

O κώδικας της σελίδας/script για τη δημιουργία της υδατογραφημένης φωτογραφίας, θα καλεί την παραπάνω εντολή: (π.χ. example_im.php):

<?php       
//path to 'convert' tool
$whereis_convert = '/usr/bin';

//command to execute
$command = "$whereis_convert/convert -thumbnail 100x75"
           ." sample_photo.png new_photo_thumb_im.png";

//execute command
exec ($command);
?>
<html>
<head><title>examples of im</title></head>
<body>

Original:<br><img src="sample_photo.png"><br>
New:<br><img src="new_photo_thumb_im.png"><br>

</body>
</html>

H γραμμή

$whereis_convert = '/usr/bin';

δηλώνει το πού βρίσκεται στο σύστημά μας η εντολή «convert». Σε ένα UNIX σύστημα συνήθως η εντολή βρίσκεται στο /usr/bin.

Η γραμμή

$command = "$whereis_convert/convert -thumbnail 100x75"
           ." sample_photo.png new_photo_thumb_im3.png";

είναι η εντολή που περιγράψαμε παραπάνω και κάνει την παραγωγή του thumbnail.

Η γραμμή

exec ($command);

εκτελεί την $command στο σύστημα (ως εξωτερικό πρόγραμμα).

Εδώ να τονίσουμε ότι πρέπει πάντοτε να δίνετε ιδιαίτερη προσοχή στο τί εκτελείτε με την exec() στην PHP. Εάν τα δεδομένα που δίνονται προς εκτέλεση στην exec() (η $command στο παράδειγμά μας) περιλαμβάνει δεδομένα από τους χρήστες (π.χ. αν το filename δίνεται από τον χρήστη) και δεν τα ελέγχετε διεξοδικά πριν την κλήση exec(), μπορεί να προκαλέσετε μεγάλο πρόβλημα ασφαλείας στο σύστημά σας (πρέπει να εμπιστευόμαστε τους χρήστες, όχι όμως τα δεδομένα τους!).

Αποτελέσματα

Η νέα φωτογραφία thumbnail “new_photo_thumb_im.png” είναι:

Δημιουργία υδατογραφήματος

Για τη δημιουργία της εικόνας με το υδατογράφημα, σε αρχείο τύπου JPEG ποιότητας 90/100, αρκεί να καλέσουμε στο κέλυφος την εντολή «convert» ως εξής:

$ composite -quality 90 watermark.png sample_photo.png new_photo_wm_im.jpg

H εντολή «composite» συνθέτει τις εικόνες «watermark.png» και «sample_photo.png» στη νέα εικόνα «new_photo_wm_im.jpg» η οποία παράγεται με ποιότητα 90/100.

O κώδικας της σελίδας/script για τη δημιουργία της υδατογραφημένης φωτογραφίας, είναι ίδιος με το παράδειγμα της παραγωγής thumbnail παραπάνω, όμως αυτή τη φορά η εντολή $command είναι:

$command = "$whereis_convert/composite --quality 90"
           ." watermark.png sample_photo.png new_photo_wm_im.jpg";

ώστε να εκτελεστεί η «composite» με τα κατάλληλα ορίσματα. Αναμένουμε την «composite» να βρίσκεται στο ίδιο μονοπάτι (path) με την «combine».

Αποτελέσματα

Η νέα υδατογραφημένη φωτογραφία από το ImageMagick “new_photo_wm_im.jpg” είναι:

Ως επιπλέον παράδειγμα, εάν θέλουμε να μειώσουμε την καλυπτικότητα του υδατογραφήματος με το ImageMagick αυτό γίνεται πολύ απλά, ως εξής:

$ composite -quality 90 -dissolve 30 watermark.png sample_photo.png new_im.jpg

όπου δίνουμε και την παράμετρο -dissolve. Tο αποτέλεσμα είναι:

Εδώ ολοκληρώνεται το άρθρο περί επεξεργασίας εικόνας μέσω προγραμματισμού (με παραδείγματα στην PHP). Φυσικά δεν αγγίξαμε παρά μόνο την επιφάνεια του θέματος, ώστε να δώσουμε μια εικόνα για τις δυνατότητες που προσφέρονται από τις βιβλιοθήκες επεξεργασίας εικόνας.

Για περισσότερες πληροφορίες, μπορείτε να ακολουθήσετε τους συνδέσμους που αναφέρονται παραπάνω στο άρθρο, προς τα web sites των βιβλιοθηκών.

Αυτό το έργο, εκτός αν έχει ρητώς διατυπωθεί διαφορετικά, εκδίδεται υπό μία Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Άδεια.