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

• Στατικές εικόνες, που δημιουργούνται ανεξάρτητα ή δανείζονται από κάπου, μπορούν να ενσωματωθούν σε μια σελίδα HTML.
• Μπορούν να χρησιμοποιηθούν εικόνες που δημιουργούνται μέσω προγραμματισμού (HTML + CSS).
• Μπορείτε να χρησιμοποιήσετε τη βιβλιοθήκη gd για να προ-δημιουργήσετε στατικά γραφικά για όλες τις πιθανές καταστάσεις που μπορεί να προκύψουν κατά την εκτέλεση ενός σεναρίου, να τα αποθηκεύσετε σε αρχεία και να τα εμφανίσετε υπό όρους.

Δεν θα εξετάσουμε την επιλογή εισαγωγής γραφικών με χρήση στατικών εικόνων λόγω της απλότητάς τους, επομένως πρώτα θα εξετάσουμε μια απλή επιλογή (γραφικά HTML + CSS) και στη συνέχεια θα εξετάσουμε τη χρήση της βιβλιοθήκης gd στην PHP.

Γραφικά HTML + CSS

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

Εργασία με γραφικά σε στυλ PHP, HTML, CSS /* CSS που σχηματίζουν το σχέδιο */ body div ( ύψος: 1em; οθόνη: inline-block; κατακόρυφη στοίχιση: μεσαίο ) span ( οθόνη: inline-block; πλάτος: 120 px ) .πορτοκάλι ( φόντο: πορτοκαλί ) .μήλο ( φόντο: #33CC66 ) .μπανάνα ( φόντο: κίτρινο ) .ντομάτα ( φόντο: κόκκινο ) .αγγούρι ( φόντο: γκρι ) .πατάτα ( φόντο: γκρι ) Φόρμα παραγγελίας Φρούτα Πορτοκάλια Μήλα Μπανάνες Λαχανικά Ντομάτες Αγγούρια Πατάτες

Αυτό το παράδειγμα δεν δείχνει κανένα νέο χαρακτηριστικό της PHP, αλλά δείχνει απλώς έναν απλό τρόπο δημιουργίας γραφικών χρησιμοποιώντας HTML και CSS (σε αυτήν την περίπτωση γραφήματα ράβδων):

βιβλιοθήκη gd

Τα εργαλεία γραφικών που περιγράφονται στην προηγούμενη ενότητα εξαντλούν πρακτικά τις δυνατότητες του τυπικού κώδικα HTML (αν και αξίζει να σημειωθεί ότι δεν καλύψαμε το αρκετά ισχυρό εργαλείο δημιουργίας γραφικών HTML5 Canvas). Τώρα ας προχωρήσουμε στην περιγραφή μεθόδων για τη δημιουργία πραγματικά αυθαίρετων γραφικών χρησιμοποιώντας τη βιβλιοθήκη gd.

Γενική περιγραφή της βιβλιοθήκης gd

Σε γενικές γραμμές, το gd toolkit είναι μια βιβλιοθήκη κώδικα C για τη δημιουργία και το χειρισμό εικόνων. Αυτή η βιβλιοθήκη αναπτύχθηκε αρχικά και έγινε διαθέσιμη στο κοινό από τους ταλαντούχους και γενναιόδωρους υπαλλήλους του Boutell.com.

Η ίδια η βιβλιοθήκη gd δεν είναι πρόγραμμα γραφικών ή σχεδίασης, ούτε αποτελεί αυτόνομη εφαρμογή ή γραφική διεπαφή χρήστη. Αντίθετα, η βιβλιοθήκη gd παρέχει λειτουργίες που μπορούν να κληθούν από οποιοδήποτε πρόγραμμα για να εκτελέσουν τον επιθυμητό χειρισμό εικόνας. Αυτό σημαίνει ότι η βιβλιοθήκη gd μπορεί να συνδεθεί με οποιοδήποτε πρόγραμμα C στο οποίο είναι απαραίτητο να χρησιμοποιηθεί ο κώδικας αυτής της βιβλιοθήκης. Αυτό ακριβώς είναι το πρόβλημα που έλυσαν οι προγραμματιστές του συστήματος PHP.

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

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

Μορφές εικόνας

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

Οι μορφές GIF και PNG προορίζονται να περιγράψουν ένα πλέγμα από έγχρωμα στοιχεία που αντιστοιχούν σε pixel, με ορισμένες προσθήκες. Η πρώτη προσθήκη είναι ότι τα κελιά μπορούν να περιέχουν πραγματικούς αριθμούς χρωμάτων ή ευρετήρια σε έναν πίνακα με αριθμούς χρωμάτων. (Η πρώτη επιλογή σάς επιτρέπει να δημιουργείτε πιο εκφραστικές εικόνες, καθώς σας επιτρέπει να παρέχετε οποιονδήποτε αριθμό διαφορετικών χρωμάτων και η τελευταία επιλογή σας βοηθά να δημιουργήσετε πιο συμπαγείς εικόνες.)

Η δεύτερη προσθήκη έχει ως εξής. Φυσικά, η εννοιολογική αναπαράσταση των μορφών GIF και PNG είναι αρκετά απλή, αλλά στην πράξη, η ανάγνωση, η εγγραφή και η μετάδοση εικόνων σε αυτές τις μορφές γίνεται πάντα σε συμπιεσμένη μορφή. Η συμπίεση είναι απαραίτητη επειδή η αποθήκευση δεδομένων που αντιπροσωπεύονται ως πλέγμα κελιών απαιτεί μεγάλη ποσότητα μνήμης. Μια απλή εικόνα 500x400 pixel περιέχει 200.000 pixel και αν κάθε pixel απαιτεί τρία byte, η απαιτούμενη ποσότητα μνήμης είναι ήδη πάνω από μισό megabyte.

Το θέμα της συμπίεσης είναι ευρύ και πολύπλοκο, αλλά οι περισσότεροι αλγόριθμοι συμπίεσης βασίζονται στη μείωση του πλεονασμού της εικόνας προκειμένου να μειωθεί το μέγεθός της. (Για παράδειγμα, θα χρειαστεί λιγότερος χώρος στη μνήμη για να καθοριστεί ότι κάθε εικονοστοιχείο σε μια εικόνα είναι πράσινο από ό,τι για να καθοριστεί η πράσινη τιμή για κάθε εικονοστοιχείο ξεχωριστά.) Δυστυχώς, οι αλγόριθμοι συμπίεσης δεν βασίζονται στη χρήση αυτών των ιδιοτήτων επειδή πρέπει να αποφασίσουν κάτι τέτοιο σύνθετα προβλήματα που οι μέθοδοι επίλυσης αυτών των προβλημάτων, που εφαρμόζονται στον αλγόριθμο συμπίεσης που χρησιμοποιείται για τη δημιουργία εικόνων σε μορφή GIF, έχουν ακόμη κατοχυρωθεί με δίπλωμα ευρεσιτεχνίας.

Εγκατάσταση της βιβλιοθήκης

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

Επομένως, η εγκατάσταση της βιβλιοθήκης gd πρέπει να ξεκινήσει από το βήμα μηδέν - ελέγχοντας εάν αυτή η βιβλιοθήκη έχει ήδη εγκατασταθεί. Πρώτα, εισαγάγετε τον ακόλουθο κώδικα στο αρχείο του σεναρίου σας και δείτε τα αποτελέσματα της εκτέλεσης του στο πρόγραμμα περιήγησής σας, είτε τα σενάρια εκτελούνται από την εταιρεία φιλοξενίας Ιστού σας είτε εκτελούνται εξ ολοκλήρου από τη δική σας εγκατάσταση:

Αφού εμφανιστεί αυτή η σελίδα στην οθόνη, απλώς αναζητήστε τη συμβολοσειρά κειμένου "gd" στο παράθυρο του προγράμματος περιήγησης. Αυτό θα πρέπει να αποκαλύψει μια υποενότητα που περιγράφει τον βαθμό στον οποίο η εγκατάσταση της PHP σας επιτρέπει την υποστήριξη για τη βιβλιοθήκη gd. Εάν σκοπεύετε να προετοιμάσετε μόνο ορισμένους τύπους εικόνων (για παράδειγμα, PNG) και τα αποτελέσματα της συνάρτησης phpinfo() υποδεικνύουν ότι η υποστήριξη για αυτόν τον τύπο εικόνας είναι ενεργοποιημένη, μπορείτε να ξεκινήσετε αμέσως. Και αν οι πληροφορίες έκδοσης gd περιλαμβάνουν τη λέξη "πακέτο", τότε χρησιμοποιείται η βιβλιοθήκη gd που συνοδεύει την PHP.

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

Η χρήση της βιβλιοθήκης gd που συνοδεύει την PHP εξαλείφει πολλές από τις ταλαιπωρίες που σχετίζονται με την εγκατάσταση του gd, αλλά όχι όλες. Το γεγονός είναι ότι η χρήση της ίδιας της έκδοσης που περιλαμβάνεται στο κιτ διανομής σας επιτρέπει να αποκτήσετε τη βιβλιοθήκη gd, αλλά όχι απαραίτητα όλες τις βιβλιοθήκες που είναι απαραίτητες για τη λειτουργία του gd. Η ίδια η βιβλιοθήκη gd εξαρτάται από πολλές άλλες βιβλιοθήκες: libpng (για χειρισμό εικόνων PNG), zlib (για συμπίεση) και jpeg-6b ή μεταγενέστερη (για χειρισμό εικόνων JPEG εάν χρειάζεται). Αυτές οι βιβλιοθήκες υπάρχουν ήδη σε πολλές εγκαταστάσεις Linux, οπότε μπορεί να αρκεί να συμπεριλάβετε την απαιτούμενη επιλογή με (όπως --with-zlib) στις επιλογές χωρίς να προσδιορίσετε τον κατάλογο εγκατάστασης. Εάν κάνετε τη διαμόρφωση της PHP μόνοι σας, μπορείτε απλώς να προσθέσετε την επιλογή --with-gd για να διασφαλίσετε ότι η παρεχόμενη έκδοση του gd περιλαμβάνεται στο εκτελέσιμο αρχείο. Και αν θέλετε να υποδείξετε μια διαφορετική έκδοση, χρησιμοποιήστε την επιλογή --with-gd=path.

Εάν διαπιστώσετε ότι λείπουν μία ή περισσότερες απαιτούμενες βιβλιοθήκες, αυτό σημαίνει ότι αυτές οι βιβλιοθήκες θα πρέπει να κατασκευαστούν ξεχωριστά. Για πληροφορίες σχετικά με το πού μπορείτε να βρείτε τις τρέχουσες εκδόσεις, μπορείτε να ξεκινήσετε ανατρέχοντας στην τεκμηρίωση που βρίσκεται στη διεύθυνση www.libgd.org.

Βασικές αρχές εργασίας με τη βιβλιοθήκη gd

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

Μια εικόνα που υποβάλλεται σε επεξεργασία με χρήση της εργαλειοθήκης gd χαρακτηρίζεται από πληροφορίες σχετικά με το πλάτος, το ύψος και το χρώμα όλων των pixel, ο αριθμός των οποίων είναι ίσος με το γινόμενο του πλάτους και του ύψους. Συνήθως, ένα πρόγραμμα ξεκινά την αλληλεπίδρασή του με τη βιβλιοθήκη gd είτε δημιουργώντας μια νέα κενή εικόνα (στην οποία θα σχεδιάσετε και θα σχεδιάσετε), είτε εισάγοντας μια εικόνα από ένα αρχείο. Συνήθως εκτελούνται τα ακόλουθα βήματα: πρώτον, η κατανομή των χρωμάτων στην εικόνα, δεύτερον, σχεδίαση και ζωγραφική ή χειρισμός της εικόνας χρησιμοποιώντας κάποιες άλλες λειτουργίες, τρίτον, μετατροπή της εικόνας σε μια γενικά αποδεκτή μορφή (για παράδειγμα, PNG ή JPEG ) και το μεταφέρει στον προορισμό του.

Αναπαράσταση χρωμάτων

Υπάρχουν δύο τρόποι για να αναπαραστήσετε τα χρώματα σε εικόνες gd: μια αναπαράσταση με βάση την παλέτα, η οποία περιορίζεται σε 256 χρώματα και μια αναπαράσταση αληθινού χρώματος, η οποία σας επιτρέπει να καθορίσετε έναν αυθαίρετο αριθμό διαφορετικών αριθμών χρωμάτων RBG. Στο gd 1.x, η μόνη επιλογή ήταν να χρησιμοποιηθούν χρώματα που βασίζονται σε παλέτα, αλλά στο gd 2.x και στην έκδοση αυτής της βιβλιοθήκης που περιλαμβάνεται στην PHP, είναι δυνατή η δημιουργία εικόνων που βασίζονται σε παλέτα και εικόνων σε ρεαλιστικά χρώματα. Ένα πράγμα που πρέπει να θυμάστε είναι ότι οποιαδήποτε δεδομένη εικόνα gd πρέπει είτε να βασίζεται σε παλέτα είτε να έχει αληθινά χρώματα (RGB). Αυτό σημαίνει ότι δεν υπάρχει επιλογή εισαγωγής ρεαλιστικών χρωμάτων σε εικόνες με βάση μια παλέτα.

Για να λάβετε την αρχική κενή εικόνα με βάση την παλέτα, πρέπει να καλέσετε τη συνάρτηση ImageCreate() και για να λάβετε την εικόνα σε αληθινά χρώματα, χρησιμοποιήστε τη συνάρτηση ImageCreateTrueColor().

Εικόνες που βασίζονται σε παλέτα

Τα χρώματα καθορίζονται στη μορφή Κόκκινο-Πράσινο-Μπλε (RGB), χρησιμοποιώντας τρεις αριθμούς από το 0 έως το 255. Για παράδειγμα, το χρώμα που καθορίζεται από τους αριθμούς (255, 0, 0) είναι έντονο κόκκινο, το χρώμα ( 0, 255, 0) - πράσινο, χρώμα (0, 0, 255) - μπλε, χρώμα (0, 0, 0) - μαύρο, έγχρωμο (255, 255, 255) - λευκό και έγχρωμο (127, 127, 127) - γκρι. Δημιουργώντας όλο και περισσότερα νέα χρώματα, μπορείτε να επιλέξετε τις τιμές των τριών χρωματικών συστατικών αυθαίρετα.

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

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

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

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

Εικόνες με ρεαλιστικά χρώματα

Το gd 2.0 και μεταγενέστερο παρέχει επίσης τη δυνατότητα δημιουργίας εικόνων που δεν βασίζονται σε παλέτα, στις οποίες κάθε pixel αποθηκεύει έναν αυθαίρετο αριθμό χρώματος RGB. Σε αυτή τη λεγόμενη μορφή πραγματικού χρώματος, ο αριθμός των πιθανών χρωμάτων είναι εξαιρετικά μεγάλος. Όχι μόνο αυτή η δυνατότητα επεκτείνει απεριόριστα το εύρος της καλλιτεχνικής έκφρασης, αλλά σας επιτρέπει επίσης να αναπαράγετε πιστά εικόνες PNG και JPEG με αληθινά χρώματα που έχουν φορτωθεί στη μνήμη χρησιμοποιώντας το κιτ εργαλείων gd.

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

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

Διαφάνεια

Οι εκδόσεις του gd 2.x υποστηρίζουν την έννοια της διαφάνειας. Αυτό χρησιμοποιεί ένα κανάλι άλφα (εκτός από τις τιμές του κόκκινου, του πράσινου και του μπλε) για να δείξει πόσο διαφανές είναι το χρώμα. Αυτό επιτρέπει, για παράδειγμα, ένα σχήμα να υπερτίθεται σε ένα άλλο έτσι ώστε το πρώτο σχήμα να παραμένει μερικώς ορατό αντί να επικαλύπτεται πλήρως το δεύτερο.

Στην PHP, πολλές συναρτήσεις για την εργασία με εικόνες έχουν ένα ανάλογο που περιέχει τη λέξη "alpha" στο όνομα, γεγονός που δείχνει ότι σε αυτές τις συναρτήσεις το χρώμα αντιπροσωπεύεται από τέσσερις τιμές (R, G, B, A). Για παράδειγμα, η συνάρτηση imageColorAllocate() λαμβάνει τρεις παραμέτρους και όταν καλείτε τη συνάρτηση ImageColorAllocateAlpha(), πρέπει να καθορίσετε μια τέταρτη παράμετρο με τιμή μεταξύ 0 και 127. Η τιμή μηδέν υποδηλώνει ότι το χρώμα είναι εντελώς αδιαφανές και μια τιμή από 127 υποδηλώνει ότι το χρώμα είναι εντελώς αδιαφανές.διαφανές

Συντεταγμένες και εντολές σχεδίασης

Μετά τη δημιουργία μιας εικόνας χρησιμοποιώντας την εργαλειοθήκη gd, δημιουργείται έμμεσα ένα σύστημα συντεταγμένων που σας επιτρέπει να καθορίσετε εντολές σχεδίασης μέσα σε αυτό. Οι οριακές τιμές συντεταγμένων σε αυτό το σύστημα καθορίζονται από τις καθορισμένες παραμέτρους του πλάτους και του ύψους της εικόνας.

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

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

Δεν υπάρχει τίποτα που να εμποδίζει τις εντολές σχεδίασης που εκτείνονται πέρα ​​από την καθορισμένη εικόνα, αλλά ένα τέτοιο σχέδιο δεν έχει ορατό αποτέλεσμα. Για παράδειγμα, ένα ορθογώνιο δεν θα είναι ορατό στην εικόνα εάν όλες οι τιμές συντεταγμένων είναι αρνητικές.

Μετατροπή μορφής

Όλες οι λειτουργίες σχεδίασης και χειρισμού εικόνας εκτελούνται στην εικόνα που αναπαρίσταται στην εσωτερική μορφή gd. Και αφού ολοκληρωθούν αυτές οι λειτουργίες, το σενάριο μπορεί να καλέσει μία από τις εντολές μετατροπής και εξόδου (imagepng, imagetjpeg, κ.λπ.) για να μετατρέψει αυτήν την εικόνα στην απαιτούμενη μορφή γραφικών και να την εξάγει στο παράθυρο του προγράμματος περιήγησης του χρήστη (ή σε ένα αρχείο).

Απελευθέρωση πόρων

Μόλις το αποτέλεσμα της μετατροπής της ολοκληρωμένης εικόνας gd μεταφερθεί στον χρήστη, μπορούμε να θεωρήσουμε ότι η εργασία με την εσωτερική έκδοση έχει ολοκληρωθεί. Αυτό σημαίνει ότι αυτή η έκδοση πρέπει να καταστραφεί. Ο σωστός τρόπος για να γίνει αυτό είναι να καλέσετε την imagedestroy() με μια εικόνα ως παράμετρο.

Λειτουργίες βιβλιοθήκης gd

Δεν πρόκειται να παραθέσουμε ξεχωριστά και να περιγράψουμε σε αυτό το άρθρο όλες τις λειτουργίες που παρέχονται στη διεπαφή gd του διερμηνέα PHP. Για να εξοικειωθείτε με αυτές τις πληροφορίες, συνιστούμε να χρησιμοποιήσετε την ενότητα «Επεξεργασία και δημιουργία εικόνας» του εγχειριδίου php.net. Οι περισσότερες συναρτήσεις gd εμπίπτουν σε μία από τις κατηγορίες που εμφανίζονται στον παρακάτω πίνακα. Σημειώστε ότι τα ονόματα συναρτήσεων που παρατίθενται σε αυτόν τον πίνακα γράφονται με κεφαλαία για να κάνουν το πρώτο γράμμα κάθε λέξης πιο ευανάγνωστο, αλλά αυτή η συνθήκη δεν τηρείται πάντα στα παραδείγματα κώδικα επειδή τα ονόματα συναρτήσεων PHP δεν κάνουν διάκριση πεζών-κεφαλαίων:

Ταξινόμηση συναρτήσεων gd Πληκτρολογήστε Παράδειγμα Σημείωση

Λειτουργίες δημιουργίας εικόνας	ImageCreate(), ImageCreateTruecolor(), ImageCreateFromGd(), ImageCreateFromJpeg()	Επιστρέψτε μια νέα εικόνα gd. Η συνάρτηση ImageCreate() λαμβάνει ως παραμέτρους το πλάτος και το ύψος της εικόνας και οι παράμετροι άλλων συναρτήσεων είναι μια διαδρομή αρχείου, διεύθυνση URL ή μια συμβολοσειρά που περιέχει μια εικόνα που δημιουργήθηκε προηγουμένως που θα πρέπει να φορτωθεί και να μετατραπεί σε μορφή gd
Λειτουργίες που εκτελούν λειτουργίες διανομής χρώματος	ImageColorAllocate(), ImageColorAllocateAlpha(), ImageColorDeallocate()	Η συνάρτηση ImageColorAllocate() παίρνει μια λαβή εικόνας και τις απαιτούμενες τιμές κόκκινου, πράσινου και μπλε ως παραμέτρους και στη συνέχεια επιστρέφει έναν αριθμό χρώματος για μελλοντική χρήση σε λειτουργίες σχεδίασης και γραφικής παράστασης. Η συνάρτηση ImageColorAllocateAlpha δέχεται μια πρόσθετη παράμετρο - συντελεστή διαφάνειας (0-127)
Λειτουργίες που εκτελούν λειτουργίες αντιστοίχισης χρωμάτων	ImageColorClosest(), ImageColorClosestAlpha(), ImageColorExact(), ImageColorExactAlpha()	Επιστρέψτε το ευρετήριο του αντίστοιχου χρώματος στην παλετοποιημένη εικόνα. Οι συναρτήσεις που περιέχουν τη λέξη "Πιο κοντά" στο όνομά τους επιστρέφουν το χρώμα που ταιριάζει περισσότερο (η ακρίβεια αντιστοίχισης μετράται ως η απόσταση μεταξύ των σημείων στο χώρο τιμών RGB). συναρτήσεις με την ονομασία "Ακριβής" επιστρέφουν τον αριθμό χρώματος μόνο εάν είναι πανομοιότυπος με αυτόν που αναζητήθηκε, διαφορετικά επιστρέφουν την τιμή -1, οι συναρτήσεις με το όνομα "Alpha" λειτουργούν σε χρώματα, τα οποία καθορίζονται χρησιμοποιώντας τέσσερις τιμές (με διαφανή χρώματα)
Λειτουργίες γραμμικής σχεδίασης	ImageLine(), ImageDashedLine(), ImageRectangle(), ImagePolygon(), ImageEllipse(), ImageArc()	Χρησιμοποιούνται για τη σχεδίαση ευθύγραμμων τμημάτων ή καμπυλών του καθορισμένου σχήματος. Συνήθως, η πρώτη παράμετρος καθεμιάς από αυτές τις συναρτήσεις είναι η εικόνα, η τελευταία παράμετρος είναι το χρώμα και οι ενδιάμεσες παράμετροι είναι οι συντεταγμένες X και Y.
Ρυθμίσεις στυλό σχεδίασης γραμμών	ImageSetStyle(), ImageSetThickness()	Αλλαγή ρυθμίσεων που επηρεάζουν τα χαρακτηριστικά των γραμμών που παράγονται από επόμενες εντολές σχεδίασης γραμμής (ορισμένες από αυτές τις λειτουργίες ισχύουν μόνο για gd 2.0.1 ή νεότερες εκδόσεις)
Λειτουργίες σχεδίασης και πλήρωσης	ImageFilledRectangle(), ImageFilledEllipse(), ImageFilledPolygon(), ImageFilledArc(), ImageFill()	Κατά κανόνα, είναι παρόμοιες με τις αντίστοιχες λειτουργίες για τη σχεδίαση γραμμών, αλλά παρέχουν όχι μόνο τη σχεδίαση των περιγραμμάτων των περιοχών, αλλά και τη πλήρωση των δημιουργημένων περιοχών με χρώμα. Η ειδική συνάρτηση ImageFill() εκτελεί μια λειτουργία πλήρωσης χρησιμοποιώντας ένα καθορισμένο χρώμα πλήρωσης. Η πλήρωση γίνεται προς όλες τις κατευθύνσεις ξεκινώντας από τις καθορισμένες συντεταγμένες XY (ορισμένες από αυτές τις λειτουργίες απαιτούν gd 2.0.1 ή μεταγενέστερη έκδοση)
Λειτουργίες για εργασία με κείμενο	ImageString(), ImageLoadFont()	Η συνάρτηση ImageString λαμβάνει ως παραμέτρους μια λαβή εικόνας, αριθμό γραμματοσειράς, συντεταγμένες X και Y, μια συμβολοσειρά κειμένου και ένα χρώμα. Εάν ο αριθμός γραμματοσειράς είναι μεταξύ 1 και 5, τότε μία από τις πέντε ενσωματωμένες γραμματοσειρές χρησιμοποιείται για την εμφάνιση της γραμμής σε αυτό το χρώμα. Από την άλλη πλευρά, ένας αριθμός γραμματοσειράς μεγαλύτερος από 5 υποδεικνύει το αποτέλεσμα της φόρτωσης μιας εξειδικευμένης γραμματοσειράς χρησιμοποιώντας τη συνάρτηση ImageLoadFont()
Λειτουργίες εξαγωγής	ImagePng(), ImageJpeg()	Μετατρέψτε την εσωτερική εικόνα gd σε μια εικόνα της κατάλληλης μορφής και, στη συνέχεια, στείλτε αυτήν την εικόνα στη ροή εξόδου. Εάν έχει καθοριστεί μόνο μία παράμετρος (η λαβή εικόνας), τότε η εικόνα επαναλαμβάνεται στον χρήστη και εάν χρησιμοποιείται μια πρόσθετη παράμετρος, η οποία είναι μια διαδρομή αρχείου, ο προορισμός της ροής εξόδου γίνεται το αρχείο
Λειτουργία καταστροφής εικόνας	ImageDestroy()	Λαμβάνει μια λαβή εικόνας ως παράμετρο και απελευθερώνει όλους τους πόρους που σχετίζονται με την εικόνα

Υποστήριξη εικόνας HTTP

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

Δημιουργία εικόνων πλήρους σελίδας

Ολόκληρη η σελίδα που δημιουργείται μπορεί να μορφοποιηθεί ως εικόνα. Σε αυτήν την περίπτωση, πρέπει να περάσετε μια κεφαλίδα HTTP πριν από τα δεδομένα εικόνας, δηλώνοντας έτσι ότι αυτό που ακολουθεί είναι μια εικόνα συγκεκριμένου τύπου. Για παράδειγμα, οι ακόλουθες γραμμές ενδέχεται να παρέχονται στο τέλος του σεναρίου:

// ... κώδικας που δημιουργεί μια εικόνα και την εκχωρεί // στη μεταβλητή $image header("Content-type: image/png"); // Εμφάνιση του τίτλου στο πρόγραμμα περιήγησης imagepng($image); // Μεταβίβαση των δεδομένων της ίδιας της εικόνας, μετατροπής σε μορφή PNG imagedestroy($image); // Αποδέσμευση πόρων

Το πλεονέκτημα αυτής της προσέγγισης είναι ότι οποιαδήποτε πληροφορία, συμπεριλαμβανομένων των παραμέτρων POST, μπορεί να χρησιμοποιηθεί για τη μετάδοση οδηγιών σχετικά με τη σύνθεση της μελλοντικής εικόνας. Το μειονέκτημα είναι ότι η σελίδα που προκύπτει δεν μπορεί να περιέχει κανονικό κώδικα HTML. Στην πραγματικότητα, πρέπει ακόμη και να προσέχετε να μην στέλνετε κανένα κείμενο πριν από τον τίτλο και την εικόνα στα σενάρια σας, καθώς αυτό ισοδυναμεί με πρόωρη αποστολή του περιεχομένου. Σε αυτήν την περίπτωση, εμφανίζεται το μήνυμα σφάλματος "Οι κεφαλίδες έχουν ήδη αποσταλεί...".

Ενσωμάτωση εικόνων αποθηκευμένων σε αρχεία

Πρώτα απ 'όλα, σημειώστε ότι η HTML υποστηρίζει τον περιγραφέα , το οποίο σας επιτρέπει να ενσωματώσετε μια εικόνα καθορίζοντας τη διαδρομή αρχείου εικόνας ή τη διεύθυνση URL, όπως στο ακόλουθο παράδειγμα:

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

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

Αλλά σε μια συγκεκριμένη κατάσταση αυτή η προσέγγιση είναι ιδανική. Πρόκειται για τη δημιουργία και την αποθήκευση εικόνων που αντιπροσωπεύουν ένα πεπερασμένο σύνολο επιλογών. Σε αυτήν την περίπτωση, υπάρχει ένας συγκεκριμένος τρόπος για να συσχετίσετε μια συγκεκριμένη κατάσταση με το όνομα του αρχείου εικόνας. Όταν προκύπτουν ορισμένες από αυτές τις καταστάσεις που απαιτούν την έξοδο μιας εικόνας, ελέγχεται για να διαπιστωθεί εάν υπάρχει ήδη ένα αντίστοιχο αρχείο. Εάν η απάντηση είναι θετική, εφαρμόζεται απλώς ένας σύνδεσμος σε αυτό το αρχείο, μορφοποιημένος ως περιγραφέας , και εάν η απάντηση είναι όχι, τότε δημιουργείται μια εικόνα, γράφεται σε ένα αρχείο και, στη συνέχεια, εφαρμόζεται ξανά ένας σύνδεσμος σε αυτήν την εικόνα. Τελικά, η δημιουργία νέων αρχείων απλά δεν θα είναι απαραίτητη.

Ενσωμάτωση εικόνων που δημιουργούνται σε σενάρια

Τέλος, δεν υπάρχει κανένας λόγος για τον οποίο δεν θα μπορούσατε να παρέχετε ένα αυτόνομο σενάριο εικόνας και στη συνέχεια να ενσωματώσετε την εικόνα που προκύπτει σε μια δυναμική σελίδα που δημιουργήθηκε από άλλο σενάριο, προσδιορίζοντας στον περιγραφέα URL αυτού του σεναρίου. Η μόνη δυσκολία είναι να επιλέξετε τον τρόπο μεταφοράς των απαραίτητων δεδομένων στην εξαρτημένη σελίδα. Για παράδειγμα, μια λαβή που υποδεικνύει μια ενσωματωμένη εικόνα μπορεί να μοιάζει με αυτό:

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

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

Ωστόσο, υπάρχουν και μη τυπικές εκδόσεις προγραμμάτων περιήγησης που δεν λαμβάνουν υπόψη την πιθανότητα ένα αρχείο με επέκταση .php να παράγει μια εικόνα, παρόλο που η κεφαλίδα που πέρασε υποδεικνύει ότι ακολουθεί μια εικόνα. Επομένως, όταν χρησιμοποιείτε αυτήν τη μέθοδο, πρέπει να δοκιμάσετε τα σενάρια σε διαφορετικά προγράμματα περιήγησης και να βεβαιωθείτε ότι ο προβλεπόμενος κύκλος των χρηστών θα λάβει τις σελίδες με τη μορφή που σκοπεύατε.

Ακολουθούν παραδείγματα χρήσης της βιβλιοθήκης gd για τη δημιουργία εικόνων.

Ένα παράδειγμα χρήσης της βιβλιοθήκης gd: δημιουργία απλών σχημάτων

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

Αντικαταστήστε τις ρυθμίσεις με τις δικές σας και αποθηκεύστε αυτό το αρχείο με το όνομα connect-to-database.php στο φάκελο fcdemo.

Ας εισαγάγουμε τυχαία δεδομένα

Εάν αυτό ήταν πραγματικό έργο, ο πίνακας χρηστών θα αυξανόταν με την πάροδο του χρόνου, αλλά για λόγους επίδειξης, πρέπει να εισαγάγουμε ορισμένα δεδομένα. Ας γράψουμε ένα μικρό σενάριο που θα εισάγει τυχαία δεδομένα στον πίνακα. Μην ανησυχείτε αν δεν καταλαβαίνετε τον παρακάτω κώδικα - δεν είναι σημαντικός για αυτό το σεμινάριο.

Αποθηκεύστε αυτό το αρχείο που ονομάζεται generate-random-data.php όλα στον ίδιο φάκελο.

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

Στη συνέχεια εκτελούμε το σενάριο για την εισαγωγή των εγγραφών που δημιουργούνται στη βάση δεδομένων. Για να ξεκινήσετε αυτή τη διαδικασία, μεταβείτε σε αυτήν τη διεύθυνση - http://localhost/fcdemo/generate-random-data.php.

Τελικά θα πρέπει να δείτε το μήνυμα: "Inserted ($RecordsToInsert) records"

Βήμα 2. Προετοιμάστε τον σκελετό του ιστότοπου

Πρέπει να δημιουργήσουμε μια πολύ απλή σελίδα για να εμφανίσουμε το γράφημά μας. Κάτι σαν αυτό:

FusionCharts v3.2 - Επίδειξη PHP LinkedCharts