php מסתדרת טוב מאוד עם גרפיקה, יודעת ליצור תמונות, לצייר עליהן, לשנות את גודלם, לכתוב טקסט וכל דבר אפשרי אחר. עד עכשיו קידדתם? תתחילו לצייר!
Php מכילה כלים ליצירה, שינוי ועבודה עם תמונות באמצעות ספריית פונקציות הנקראת GD. כתבה הבאה נראה איך להשתמש בספריה הזו, ניצור תמונה מחייכת משלנו, נשמור אותה ונציג למשתמש.
ראשית עלינו לוודא שהספריה מותקנת בשרת שלנו.
ניצור קובץ php חדש ונכתוב בו
<?php phpinfo(); ?>
הפונקציה הזו מחזירה את כל המידע על אופן ההתקנה, הרחבות ונתונים על השרת עליו php מותקנת. נפעיל את הסקריפט ונחפש טבלה עם הכותרת gd
במידה והטבלה הזו אינה מופיע יהיה עלינו להתקין את GD
לעזרה בנושא אנא פנו לפורום או לחברת האיחסון שלכם.
מהי תמונה
במובן הכי פשוט תמונה היא אוסף של נקודות, כאשר לכל נקודה יש צבע משלה.
המחשב ירשום לעצמו בדרך כלשהי כמה נקודות יש ומה צבעה של כל נקודה וכך תיווצר לנו תמונה בסיסית.
קיימים דרכים שונות לרישום נתוני התמונה. אלו הם הפורמטים השונים
(jpg, png, gif, bmp, … ).
התמונה הראשונה
הקוד הבא ייצור ריבוע שחור ויציג אותו למשתמש.
<?php
$img = imagecreatetruecolor(300, 350);
header("Content-type: image/png");
imagepng($img);
$img = imagecreatetruecolor(300, 350);
header("Content-type: image/png");
imagepng($img);
בואו נראה איך הוא עובד.
השורה הראשונה יוצרת תמונה בגודל ורוחב הנתונים בצבע שחור.
צבע שחור הוא אינו צבע בפני עצמו. צבע שחור הוא חוסר צבע אחר. תארו לעמצכם חדר חשוך בלי אור ובלי חלונות. כל שאתם רואים מסביבכם הוא צבע שחור, למרות שבפועל הקירות באותו חדר יכולים להיות בכל צבע שהוא. חוסר אור גורם לכל להראות שחור. כיוון שלא הגדרנו לתמונה שום צבע — התמונה שחורה.
השורה השניה אחראית ליידע את הדפדפן שהדפדפן עומד לקבל מהשרת תמונה ולא קובץ html רגיל כדי שיהיה מוכן להציג את התמונה.
השורה השלישית אחראית על רישום בכתב את תוכן התמונה ושליחתה לדפדפן
( כמות הנקודות בתמונה, צבעה של כל נקודה וכו' )
צבעים בסיסיים אדום, ירוק, כחול
קיימים שלושה צבעים בסיסיים – אדום, ירוק וכחול אותם ניתן לערבב וליצור כל צבע אחר שתרצו.
כדי לקבל צבע לבן – יש לערבב 255 דליים של כל שלושת הצבעים. כדי לקבל ירוק, צריך 255 דליים של צבע ירוק. לאומת זאת כדי לקבל צהוב צריך לערבב 255 דליים של ירוק עם 255 דליים של אדום.
למה כל כך הרבה? הסיבה היא שכמות השחור (חוסר צבע) תעלה על כמות הצבע עמצו ולכן הצבע יראה כהה יותר ממה שהו באמת. כדי שהצבע יהווה את הצבע האמיתי שלו וכמות השחור לא תכהה אותו יש להשתמש בכמות הצבע המירבית האפשרית.
את כמות הצבע שנרצה לתת למשהו אפשר לחשב בין 0 דליים לבין 255 דליים. שזוהי כמות בגודל של 28 .
נסו לשחק עם הצבעים בעמוד הזה ולראות איך הצבע מושפע מכמות האדום, הירוק והכחול.
הגדרת צבע באמצעות imageColorAllocate
בphp קיימת פונקציה שנקראת imageColorAllocate שמקבלת את כמות האדום, ירוק, כחול ומחשבת את הצבע הסופי. את הצבע הזה נוכל להעביר כפרמטר לפונקציות כדי שישתמשו בו. לדוגמה: הפונקציה לציור קו שתקבל כפרמטר צבע כלשהו ותצייר קו מאותו צבע.
$yellow = imagecolorallocate($img, 255, 255, 0);
הפרמטר הראשון שהפונקציה מקבלת היא מזהה של התמונה בזיכרון כדי לדעת לייחס את אותו צבע לאותה תמונה. הצורך במזהה זה נובע מכך שיש תמונות שתומכות ביותר או פחות צבעים מאשר 16 מליון צבעים.
(יש לנו 255 * 255 * 255 אפשרויות של ערבובי צבעים באמצעות שלושת צבעי הבסיס, מעל 16 מליון סה"כ)
שלושת הפארמטרים האחרים הם כמות האדום, ירוק, כחול בהתאמה.
אמרנו כי צהוב הוא ערבוב של אדום וירוק לכן כמות הכחול תשאר אפסית.
נצייר קו באמצעות imageLine
לצייר קו ניתן באמצעות הפונקציה imageLine
נסו לצייר קו צהוב אלכסוני מהפינה השמאלית העליונה לפינה הימנית התחתונה.
כדי להצליח במשימה יהיה עלינו לבצע את השלבים הבאים.
1. לראות איך פועלת הפונקציה imageLine
יש לגלוש בדפדפן לכתובת php.net/imageLine ולראות אילו פאראמטרים מקבלת הפונקציה
2. להציב את הערכים המתאימים, לקרוא לפונקציה ולראות את התוצאה.
נסו בעצמכם לפני המשך הקריאה.
אם הצלחתם ויצא לכם הקוד הבא – כל הכבוד.
<?php
$img = imagecreatetruecolor(300, 350);
$yellow = imagecolorallocate($img, 255, 255, 0);
imageLine($img, 0, 0, 300, 350, $yellow);
header("Content-type: image/png");
imagepng($img);
$img = imagecreatetruecolor(300, 350);
$yellow = imagecolorallocate($img, 255, 255, 0);
imageLine($img, 0, 0, 300, 350, $yellow);
header("Content-type: image/png");
imagepng($img);
אם לא, לא נורא. תסתכלו על הקוד ונסו לצייר קו אלכסוני בכיוון השני
(מהפינה הימנית העליונה לפינה השמאלית התחתונה)
כפי שאתם רואים, הפונקציה מקבלת שישה פרמטרים.
הראשון הוא מזהה התמונה – על איזו תמונה לצייר את הקו
השני והשלישי הוא המיקום ההתחלתי של הקו. כאשר ראשית הצירים נמצאת בנקודה המאלית העליונה.
הרביעי והחמישי הם נקודת הסיום של הקו.
והפרמטר האחרון הוא הצבע בו יצבע הקו המוגדר על ידי פונקציית imageColorAllocate
ציור מלבנים בעזרת imageFilledRectangle
לא ניתן ואין צורך להגדיר צבע רקע מסוים. כדי ליצור תמונה עם צבע רקע משלנו מספיק לצייר מלבן על כל גודל התמונה בצבע שנרצה. נסו לצבוע את הרקע בירוק ולהשאיר את הקווים האלכסונייפ במקום.
גשו ל php.net/imageFilledRectangle ,
בדקו אלו ששת הפרמטרים הפונקציה מקבלת וצבעו את הרקע בירוק.
אם יצא לכם הקוד הבא והקו הצהוב נשאר במקום – כל הכבוד.
אם לא, לא נורא, נסו להבין את הקוד וצבעו לאחר מכן את הרקע בצבע אחר.
<?php
$img = imagecreatetruecolor(300, 350);
$yellow = imagecolorallocate($img, 255, 255, 0);
$green = imageColorAllocate($img, 0, 255, 0);
imageFilledRectangle($img, 0, 0, 300 , 350, $green);
imageLine($img, 0, 0, 300, 350, $yellow);
header("Content-type: image/png");
imagepng($img);
$img = imagecreatetruecolor(300, 350);
$yellow = imagecolorallocate($img, 255, 255, 0);
$green = imageColorAllocate($img, 0, 255, 0);
imageFilledRectangle($img, 0, 0, 300 , 350, $green);
imageLine($img, 0, 0, 300, 350, $yellow);
header("Content-type: image/png");
imagepng($img);
שימו לב שציור הקו האלכסוני חייב לבוא אחרי צביעת הרקע
אחרת המלבן הירוק יתמקם מעל הקו והקו לא יראה.
כתיבת טקסט בעזרת imageTTFtext
Ttf זהו קיצור של המילים true type font
פונט או בעברית גופן – הוא תמונה של אות. אילו נקודות על המחשב לצבוע כדי להציג אות מסוימת.
הפונקציה הנ"ל משתמשת בקובץ פונט מסוים כדי לדעת איך בדיוק לצייר את האות.
באמצעותה נוכל לצייר טקסט בגופנים שונים. תוכלו להעתיק את Arial (true type) מתיקיית
C:/Windows/Fonts לתוך התיקייה שבה נמצא הסקריפט ולשנות את שם הקובץ ל Arial(.ttf) .
<?php
// The text to draw
$text = 'phpguide.co.il';
// Replace path by your own font path
$font = 'Arial.ttf';
// Create the image
$im = imagecreatetruecolor(400, 130);
// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 400, 130, $white);
// Add the text
imagettftext($im, 20, 0, 10, 50, $black, $font, $text);
// Set the content-type
header('Content-type: image/png');
imagepng($im);
// The text to draw
$text = 'phpguide.co.il';
// Replace path by your own font path
$font = 'Arial.ttf';
// Create the image
$im = imagecreatetruecolor(400, 130);
// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 400, 130, $white);
// Add the text
imagettftext($im, 20, 0, 10, 50, $black, $font, $text);
// Set the content-type
header('Content-type: image/png');
imagepng($im);
שימו לב לפונקציה שמציירת את הטקסט.
היא מקבלת הרבה פרמטרים. (א) את התמונה עליה נצייר, (ב) גודל הטקסט, (ג) זווית הטקסט, (ד,ה) מיקום תחילת כתיבת הטקסט, (ו) צבע, (ז) מיקום קובץ הגופן, (ח) הטקסט עצמו.
שחקו מעט עם הפרמטרים כדי לראות איך הם משפיעים על התמונה:
שנו את הגודל, זווית ומיקום הטקסט.
אם אתם לא רואים את הטקסט, וודאו שהעתקתם ורשמתם את שם וסיומת הקובץ הפונטים ללא שגיאות ובאותן אותיות (גדולו וקטנות) כפי שהקובץ נקרא.
עבודה עם תמונות קיימות imageCreateFrom
Php מאפשרת לנו לטעון תמונה קיימת ולעבוד איתה או לצייר עליה באמצעות פונקציות מסוימות.
חשוב לזכור שלכל פורמט תמונה מותאמת פונקציה משל עצמה. לתמונות מסוג png נשתמש ב imageCreateFromPng . לתמונות gif נשתמש ב imageCreateFromGif
נסו לטעון תמונה מהמחשב שלכם ולכתוב phpguide.co.il ישירות עליה.
רמז: הדבר היחידי שמשתנה הוא שהתמונה אינה נוצרת על ידי imageCreateTrueColor אלה מאתה נוצרת בעזרת הפונקציה המתאימה.
אני ציירתי משהו כזה:
באמצעות הקוד הבא:
<?php
$text = "I'm learning
to use GD library
at the
PHPGUIDE.CO.IL";
$font = 'Arial.ttf';
$im = imagecreatefromjpeg('back.jpg');
// Add the text
imagettftext($im, 20, 3, 100, 90, imagecolorallocate($im, 0, 0, 0), $font, $text);
// Set the content-type
header('Content-type: image/png');
imagepng($im);
$text = "I'm learning
to use GD library
at the
PHPGUIDE.CO.IL";
$font = 'Arial.ttf';
$im = imagecreatefromjpeg('back.jpg');
// Add the text
imagettftext($im, 20, 3, 100, 90, imagecolorallocate($im, 0, 0, 0), $font, $text);
// Set the content-type
header('Content-type: image/png');
imagepng($im);
שימו לב, שתמונת המקור שלי הייתה מסוג jpg לכן הייתי חייב להשתמש בפונקציה המתאימה לתמונת jpeg
imagecreatefromgif
imagecreatefromjpeg
imagecreatefrompng
שמירת תמונה בקובץ
הפונקציה imagepng מאפשרת לנו להעביר פרמטר שני - שם של קובץ
לתוכו הפונקציה תשמור את התמונה שלנו.
<?php
$img = imagecreatetruecolor(300, 350);
imagepng($img, 'image1.png');
$img = imagecreatetruecolor(300, 350);
imagepng($img, 'image1.png');
הפונקציה תיצור את התמונה בתוך הקובץ.
במקרה הזה אין צורך לשלוח לדפדפן הודעה בנוגע לסוג המסמך.
שאלה שתמיד נשאלת היא איך להציג למשתמש תמונה וטקסט באותו סקריפט.
הובכן, הדבר בלתי אפשרי. הדפדפן צריך לקבל מהשרת הודעה מהו סוג העמוד
באמצעות פונקציית ה-header ואינו מסוגל להתמודד עם תמונה ו-html במסמך אחד.
יהיה עליכם לפרק את הסקריפט לשני חלקים
הראשון אחראי על תצוגת הטקסט ומכיל קוד <img src> שיגרום לדפדפן לשלוח בקשה לסקריפט השני ולקבל ממנו תמונה בחזרה.
בעיות נפוצות:
ג'יבריש במקום עברית
יכול לנבוע משני סיבות עיקריות.
א. קובץ הפונט שלכם לא מכיל הגדרה - איך לצייר את האותיות העבריות.
נסו להחליף את הגופן בArial שמכיל גם את האותיות העבריות.
ב. אתם לא משתמשים בקידוד utf-8 . כל הפונקציות הללו עובדות עם utf-8 בלבד
עליכם [url=/UTF_8_%D7%A7%D7%99%D7%93%D7%95%D7%93_%D7%95%D7%A1%D7%99%D7%9E%D7%A0%D7%99_%D7%A9%D7%90%D7%9C%D7%94.htm]לעבור מיד לשימוש ב utf-8[/url] ולשכוח את כל הקידודים האחרים לצמיתות.
הדפדפן מציג טקסט לא ברור במקום תמונה
זוכרים את השורה
header('Content-type: image/png');
מטרתה לומר לדפדפן שהעמוד הוא תמונה ולא עמוד html רגיל.
וודאו ששורה זו נמצאת בקוד שלכם.
הדפדפן כותב שלא יכול להציג את התמונה ובה שגיאה או מציג את שם העמוד
כנראה שיש שגיאה כלשהי בקוד והסקריפט שולח הודעת שגיאה.
הדפדפן מקבל מהשרת שורת טקסט ולא מצליח לפענח אותה כתמונה, לכן כותב שהתמונה אינה תקינה.
כדי לראות את השגיאה שphp החזירה ניתן להוריד את שורת ה
header('Content-type: image/png');
ואתם תראו את השגיאה בדפדפן.
Fatal error: Call to undefined function ...
הפונקציה לא קיימת. כאן שני אפשרויות.
א. רשמתם את שם הפונקציה לא נכון ויש לוודא באתר php.net שרשמתם אותה נכון.
ב. ספריית gd לא מותקנת אצלכם. אנא פנו לפורום לקבלת עזרה בהתקנה
על המסך מופיע Resource id #... במקום התמונה שלי
משאב (Resource):
משאב הוא מצביע, קישור למשהו חיצוני.
תארו לעצמכם מוסך גדול עם עשרות חניות.
מפינת הרחוב בחריקה מטורפת יוצאת לה פררי אדומה יפהפיה, עוצרת לה בחניה מספר חמש של המוסך ויוסי, הבעלים של הפררי יוצא וצועק לעבר המוסכניק: מלא לי 10 ליטר שמן במכונית. החניתי אותו בחניה מספר חמש ומראה לכיוונה עם האגודל.
העובד שלנו קיבל מהמוסכניק שני דברים. א. מספר (כמות ליטרי השמן) ב. מזהה ייחודי (מצביע) של מיקום המכונית בחניית המוסך. הוא לא קיבל את המכונית עצמה, אלה קישור למיקום בו נמצאת המכונית.
קישור זה למשהו חיצוני נקרא משאב.
התמונה שיש לנו בזיכרון היא משאב. יש פונקציה מיוחדת הלוקחת את המשאב מהזיכרון, רושמת אותו באופן בינארי ושולחת לדפדפן ושמה — imagePNG. בקוד שלך מופיע echo למשאב שלא מסוגל להדפיס מכונית. לאומתו הפונקציה imagePNG היא פונקציה מיוחדת שיודעת להתניע את המכונית, לנהוג למקום אחר ולמסור אותה לבעלים.
זהו זה.
כעת אתם מוזמנים לפנות לדוקומנטציה ולנסות בעצמכם פונקציות שונות ומשונות לציור תמונות, כי אין אף מדריך שיסביר באופן מפורט שימוש בכל פונקציה בנפרד מלבד הדוקומנטציה.
במידה ויש לכם שאלות – אנא פנו לפורום ונשמח לעזור.
תגובות לכתבה:
מדריך מעולה ויצירתי :)
LIKE אחד גדול.
מדריך מעולה!
כל הכבוד! :]
יוצאת לי עברית הפוכה :/
GD תמיד כותבת משמאל לימין.
אתה צריך להפוך את סדר האותיות במחרוזת בעצמך לפני הכתיבה.
אבל אם חלק כתוב בעברית וחלק באנגלית?
תעשה את ההיפוך לפני שאתה מחבר את המחרוזות או שתקרא ל imagettftext כמה פעמים
אין דרך אחרת? :/
אני לא מכיר. GD לא תומכת בכתיבה מימין לשמאל. בשביל זה יש פונקציות היפוך סדר אותיות כמו hebrev אבל הם לא מסתדרות עם utf-8. או שתכתוב פונקציה כזאת משלך, או שתראה פתרונות אחרים בתגובות בדוקומנטציה.
מדריך מעולה, תודה רבה. :)
יש אפשרות להדביק תמונה קטנה על תמונה גדולה?
תבחר את הפונקציה שמתאימה לך:
imagecopy, imagecopyresampled, imagecopyresized
אחרי שאנ ימשתמש בפונ' imagepng($im); באיזה דף, איך אני משתמש בתמונה הזאת?
<img src="scriptWithImagePng.php" />
thx
היה נחמד אם היה אפשר להפעיל את הספרייה בPHP אונליין ^^