تصميم موقع الويب الخاص بك مع PHP و MySQL


الدرس: إنشاء الصور في PHP


الصفحة السابقة
هل تعرف ؟ هناك أشخاص يعتقدون أن PHP مصنوع فقط لإنشاء صفحات الويب!
نعم نعم اقسم لك
ماذا, انت أيضا ! ؟
حسنًا ... لاحظ أنه لا يمكنني إلقاء اللوم عليك: خلال هذه الدورة التدريبية ، قمنا "فقط" بإنشاء صفحات HTML باستخدام PHP . من الصعب تصديق أننا يمكن أن نفعل شيئا آخر ...
في الواقع ، تم إنشاء PHP في الأصل لإنشاء صفحات الويب. لكن تدريجياً ، أدركنا أنه من الخسارة أن نقتصر على ذلك. لذلك خططنا لتكون قادرًا على إضافة "ملحقات" إليه. وبالتالي ، من خلال إضافة ملفات معينة (ملفات DLL ضمن نظام التشغيل Windows ) ، يمكن لـ PHP البدء في إنشاء الصور ، أو حتى PDF !
في هذا الفصل ، سنتحدث عن الامتداد المتخصص في توليد الصور: مكتبة GD.

تنشيط مكتبة GD


لدينا بالفعل مشكلة (يبدأ قويا) .
في الواقع ، يتم تسليم مكتبة GD (التي تسمح لك بإنشاء صور) باستخدام PHP ، لكن لم يتم تفعيلها . ماذا يعني ؟ أنه سيتعين علينا أن نطلب تفعيلها بكل بساطة.
الإجراء المتبع هو بالضبط نفس الإجراء الذي رأيناه لتنشيط PDO عندما اكتشفنا قواعد البيانات.
في WAMP على سبيل المثال ، انقر بزر الماوس الأيسر على أيقونة WAMP في شريط المهام ، ثم انتقل إلى القائمة PHP / Extensions PHP وتحقق php_gd2 .
وعلى شبكة الإنترنت ، مع مضيفي؟ هل يمكنني استخدام GD؟
ذلك يعتمد على المضيفين. يقوم جزء كبير من مضيفي الويب المجانية بإلغاء تنشيط GD لأنه يستهلك الكثير من موارد المعالج.
إذا بدأت عشرات المواقع في إنشاء صور في نفس الوقت ، فقد يتسبب ذلك في توقف الجهاز بأكمله وبالتالي إبطاء جميع المواقع الأخرى.
ومع ذلك ، لا تشعر باليأس ، فهناك بالتأكيد مضيفين مجانيين يقبلون مكتبة GD ... وإلا ، فقد تضطر إلى العثور على استضافة مدفوعة الأجر (يمكننا أن نجد مستضيفين رخيصين قاموا بتنشيط GD! ) .

أساسيات انشاء الصور


هذه هي الخطة التي سنتبعها لإنشاء صورة:
  1. 1. سوف نكتشف ما هو header   .
  2. 2. ثم سنقوم بإنشاء الصورة الأساسية.
  3. 3. أخيرًا ، سوف نرى كيف نعرض الصورة بشكل ملموس.
في العمل !
header
هناك طريقتان لإنشاء صورة في PHP .
  • إما أن نجعل نص PHP الخاص بنا يعرض صورة (بدلاً من صفحة ويب ، كما اعتدنا). في هذه الحالة ، إذا انتقلنا إلى الصفحة http://www.mysite.com/testgd.php، سيتم عرض صورة وليس صفحة ويب!
  • أو نسأل PHP لحفظ الصورة في ملف.
في كلتا الحالتين ، سيتم استخدام نفس الوظائف بالضبط.
سنبدأ بالطريقة الأولى لإنشاء الصورة ، بمعنى أننا سنجعل نصنا "يُرجع" صورة بدلاً من صفحة ويب.
ولكن كيف تجعل المتصفح يعرف أنها صورة وليست صفحة HTML يجب أن يعرضها؟
سيكون علينا ارسال ما يسمى header . بفضل الوظيفة header، سنخبر المتصفح بأننا نرسل صورة.
أذكرك بأكثر أنواع الصور شيوعًا على الويب:
  • JPEG   : هذا تنسيق مناسب جدًا للصور ، على سبيل المثال ، لأنه يمكنك استخدام العديد من الألوان ؛
  • PNG   : هذا هو التنسيق الأحدث ، وهو مناسب جدًا في معظم الحالات. في الواقع ، ما لم تكن تتعامل مع صورة و ليس رسم ، فمن الأفضل استخدام PNG .
PNG هي بطريقة ما "استبدال" تنسيق GIF .
لتبسيط الأمر: إذا كانت صورة ، فستقوم بإنشاء ملف بتنسيق JPEG ، وإلا في جميع الحالات الأخرى ، تقوم بإنشاء ملف بتنسيق PNG .
إليك كود PHP الذي يجب وضعه على "الإعلان" في المتصفح بأننا سنرسل صورة بتنسيق PNG :

<?php
header ("Content-type: image/png");
?>
حسنًا ، الأمر بسيط جدًا. هذا الكود يعني للمتصفح أننا نرسل صورة PNG ، وليس صفحة HTML .
إذا أرسلت ملف بتنسيق JPEG ، فسيكون هذا هو نفسه تقريبًا ، ولكن يمكنك استبدال "png" بـ "jpeg" .
وظيفة headerخاصة.  مثل setcookie، يجب استخدامها قبل كتابة أي كود HTML .
بوضوح ، ضع هذا السطر في بداية التعليمات البرمجية ، ولن تواجه أي مشاكل.
قم بإنشاء الصورة الأساسية
كن على دراية بوجود طريقتين لإنشاء صورة: إما أن تقوم بإنشاء صورة فارغة جديدة ، أو تقوم بتحميل صورة موجودة بالفعل وستكون بمثابة خلفية لصورتك الجديدة.
من صورة فارغة
سنبدأ بإنشاء صورة فارغة.
لإنشاء صورة فارغة في PHP ، نستخدم هذه الوظيفة imagecreate .
هذه الوظيفة بسيطة. يستغرق الأمر مُدخلين: عرض وارتفاع الصورة التي ترغب في إنشائها . تقوم بإرجاع المعلومات التي يجب أن تضعها في متغير (على سبيل المثال $image ) . مما يعطينا:

<?php
header ("Content-type: image/png");
$image = imagecreate(200,50);
?>
نحن هنا نقوم بإنشاء صورة بعرض 200 بكسل وارتفاع 50 بكسل .
$image لا يحتوي على رقم أو نص. يحتوي هذا المتغير على "صورة" . من الصعب أن نتخيل أن المتغير يمكن أن "يحتوي" على صورة ، ولكن هكذا.
نقول أن  تسمى$image "المورد" .  المورد هو متغير خاص إلى حد ما يحتوي على جميع المعلومات حول كائن. إنها هنا صورة ، لكن يمكن أن تكون ملف PDF أو حتى ملفًا نفتحته بـ fopen . هنا ، هل تتذكر شيئا؟
من صورة موجودة
الآن ، الاحتمال الآخر: إنشاء صورة من صورة موجودة بالفعل.
هذه المرة ، هناك وظيفتان يجب معرفتهما. أي واحد للاختيار؟ يعتمد ذلك على تنسيق الصورة التي تريد تحميلها:
  • JPEG   : استخدام وظيفة imagecreatefromjpeg  .
  • PNG   : استخدم الوظيفة imagecreatefrompng .
على سبيل المثال ، لدي صورة غروب الشمس لطيفة تسمى couchersoleil.jpg (الشكل التالي) .
web dynamique php
صورة couchersoleil.jpg
لإنشاء صورة جديدة بناءً على هذه الصورة ، يجب علي استخدام الوظيفة imagecreatefromjpeg . سوف يعطينا الكود التالي:

<?php
header ("Content-type: image/jpeg");
$image = imagecreatefromjpeg("couchersoleil.jpg");
?>
انظر ، أنت تعرف الآن كيفية إنشاء صورة جديدة.
سنرى الآن كيفية عرض الصورة التي أنشأتها للتو.
عندما ننتهي: نعرض الصورة
بمجرد تحميل الصورة ، يمكنك الاستمتاع بنص الكتابة ورسم الدوائر والمربعات والمزيد. سنتعلم كل هذا بعد.
أريد أن أوضح لك هنا كيفية إخبار PHP بأننا قد انتهينا وأننا نريد عرض الصورة.
تعتمد الوظيفة التي تستخدمها على نوع الصورة التي تنشئها:
  • JPEG   : استخدام وظيفة imagejpeg  .
  • PNG   : استخدم الوظيفة imagepng .
يتم استخدام هاتين الوظيفتين بنفس الطريقة: تحتاج فقط إلى الإشارة إلى الصورة التي تريد عرضها.
كما قلت لك ، هناك طريقتان لاستخدام الصور في PHP : يمكنك عرضها مباشرة بعد إنشائها ، أو حفظها على القرص حتى تتمكن من إعادة عرضها لاحقًا ، دون الحاجة إلى إعادة كل العمليات الحسابية.
عرض الصورة مباشرة
هذه هي الطريقة التي سوف نستخدمها في هذا الفصل. عند تنفيذ صفحة PHP ، فإنها تعرض الصورة التي طلبتها لإنشاءها.
هل لديك دائما المتغير الخاص بك $image في متناول اليد؟ 
إذن ، إليك الرمز الكامل الذي أستخدمه لإنشاء صورة PNG بحجم جديد وعرضها مباشرةً:

<?php
header ("Content-type: image/png"); // 1: نشير إلى أننا سنرسل صورة PNG
$image = imagecreate(200,50); // 2 : نخلق صورة جديدة بحجم 200 × 50
// 3: لدينا متعة مع صورتنا (سوف نتعلم كيفية القيام بذلك)
imagepng($image); // 4: لقد انتهينا من صنع اللعب ، نطلب عرض الصورة
?>
انها جميلة جدا ، ولكن هنا لدينا فقط صورة واحدة أمام أعيننا. ماذا لو كنت أرغب في وضع نص حوله؟ قوائم موقعي؟
في الواقع ، نحن نستخدم تقنية ، وأنا متأكد من أنها ستفاجئك. سنطلب عرض صفحة PHP كصورة .
لذلك ، إذا كانت صفحة PHP تسمى "image.php" ، فسوف تضع كود HTML هذا لعرضه من صفحة أخرى:

?<img src="image.php" /?>
لا يصدق ، أليس كذلك؟
ولكن في الواقع ، فمن المنطقي عندما تفكر في ذلك! صفحة PHP التي أنشأناها للتو هي صورة (حيث قمنا بتعديلها header ) . لذلك يمكننا عرض الصورة التي أنشأناها للتو من أي صفحة في موقعك ببساطة باستخدام العلامة  .
الميزة الكبيرة لهذه التقنية هي أن الصورة المعروضة يمكن أن تتغير في كل مرة!
حفظ الصورة على القرص
إذا كنت تفضل حفظه على القرص بدلاً من عرض الصورة مباشرة ، فيجب إضافة مُدخل إلى الوظيفة imagepng  : اسم الصورة وربما مجلدها. من ناحية أخرى ، في هذه الحالة ، لن يعود برنامج PHP النصي الخاص بك بإرجاع صورة (سيوفر فقط صورة على القرص). يمكنك بالتالي حذف الوظيفة header التي لم تعد مفيدة.

مما يعطينا:



<?php
$image = imagecreate(200,50);
imagepng($image, "images/monimage.png"); // "images" نحفظ الصورة في مجلد
?>
هذه المرة تم حفظ الصورة على القرص بالاسم monimage.png . لعرضها من صفحة ويب أخرى ، ستفعل ذلك كما يلي:

?<img src="images/monimage.png" /?>

أنت معتاد أكثر قليلاً على ذلك ، أتصور.
تتمتع هذه التقنية بميزة عدم الاضطرار إلى إعادة حساب الصورة في كل مرة (سيكون للخادم عمل أقل) ، ولكن العيب هو أنه بمجرد حفظه ، لن تتغير الصورة بعد الآن.
لكن ... لكن؟ إذا اختبرت هذا الكود ، فإنها تخلق صورة بيضاء تمامًا!  ، لم يحدث شيء جيد!
نعم أعرف. لقد كنت صبورًا وهو أمر جيد ، لأنه أصبح الآن مثيرًا للاهتمام. لذلك اذهب للحصول على عصا سحرية ، أنا في انتظارك.

النص واللون


لا بأس ، هل لديك عصا سحرية؟
إذن إليك ما سنتعلمه الآن:
  • معالجات الألوان.
  • كتابة النصوص .
ستبدأ في رؤية ما يمكن فعله قليلاً من خلال مكتبة GD ، لكنك سترى أنه يمكن القيام بالمزيد.
المعالجات مع الألوان
يقوم الكمبيوتر - ما يجب أن تعرفه - بتقسيم كل لون إلى اللون الأحمر والأخضر والأزرق. عن طريق خلط كميات الأحمر والأخضر والأزرق ، فإنه يعطينا لونًا بين ملايين الاحتمالات!
يشار إلى "كمية" الأحمر والأخضر والأزرق برقم بين 0 و 255.
  • على سبيل المثال ، إذا قلت أنني وضعت 255 من اللون الأزرق ، فهذا يعني أننا نضع اللون الأزرق.
  • إذا وضعت 100 من اللون الأزرق ، سيكون هناك القليل من اللون الأزرق.
  • إذا وضعت 0 ، فلا يوجد لون أزرق على الإطلاق.
يجب كتابة الكميات الثلاثة بترتيب RGB (أحمر أخضر أزرق) . على سبيل المثال:
( 255 0 0) .
هذا لون يحتوي على الكثير من اللون الأحمر ، وليس على أخضر أو ​​أزرق على الإطلاق. لذلك هذا اللون ... أحمر! أحسنت!
الآن ، إذا وضعت الكثير من الأحمر والأخضر:
( 255 255 0) .
إنه يعطينا اللون: أصفر!
هيا ، آخر اختبار للطريق ونتوقف عند هذا الحد:
( 255 128 0) .
هذا هو اللون البرتقالي!
للحصول على معلومات ، يتوافق اللون الأبيض مع ( 255 255 255) ، واللون الأسود إلى ( 0 0 0) .
إذا كان لديك برنامج رسم مثل paint وانتقلت إلى القائمة Couleur ، يمكنك اختيار اللون الذي تريده ، كما في الشكل التالي.
web dynamique php
اختيار اللون
كما ترى ، فإن النقر فوق اللون الذي تهتم به يمنحك كميات اللون الأحمر الأخضر الأزرق.
حتى تتمكن من اختيار اللون الذي تريده. 
ولكن العودة إلى ما يهمنا: PHP .
لتعريف لون في PHP ، يجب عليك استخدام الوظيفة imagecolorallocate .
نعطيها أربعة مُدخلات: الصورة التي نعمل عليها ، ومقدار اللون الأحمر ، ومقدار اللون الأخضر ، ومقدار اللون الأزرق.
هذه الوظيفة تقوم بإرجاع اللون لنا في متغير. بفضل هذه الوظيفة ، سنكون قادرين على إنشاء "متغيرات اللون" والتي ستكون مفيدة بالنسبة لنا للإشارة إلى اللون.
فيما يلي بعض الأمثلة لإنشاء الألوان:

<?php
header ("Content-type: image/png");
$image = imagecreate(200,50);

$orange = imagecolorallocate($image, 255, 128, 0);
$blue = imagecolorallocate($image, 0, 0, 255);
$bluelight = imagecolorallocate($image, 156, 227, 254);
$black = imagecolorallocate($image, 0, 0, 0);
$white = imagecolorallocate($image, 255, 255, 255);

imagepng($image);
?>
شيء مهم للغاية ما يجب ملاحظته: في المرة الأولى التي تتصل فيها بالوظيفة imagecolorallocate، يصبح هذا اللون هو لون خلفية صورتك.
لذلك ، إذا فهمت بشكل صحيح ، يجب أن ينشئ هذا الكود صورة ... كلها برتقالية!

إذا كنت أرغب في أن تكون الخلفية بيضاء وليست برتقالية ، فكان يجب وضعها $white أولاً.
أنت الآن تعرف كيفية إنشاء جميع ألوان قوس قزح في PHP .
اكتب النصوص
ها نحن أخيرًا في أعماقها (أخي!). لدينا صورة جميلة بخلفية برتقالية جميلة ، ونريد أن نكتب نصًا عليها.
مع الوظيفة imagestring، إنها سهلة!
هذه الوظيفة تأخذ العديد من المُدخلات. تستخدم مثل هذا:

<?php
imagestring($image, $police, $x, $y, $texte_a_ecrire, $couleur);
?>
هناك أيضًا الوظيفة imagestringup التي تعمل بنفس الطريقة تمامًا ، إلا أنها تكتب النص عموديا وليس أفقيًا! أنا بالتفصيل المُدخلات أدناه بالترتيب ، من المهم أن تفهم بشكل صحيح.
  • $image  : إنه متغيرنا الشهير الذي يحتوي على الصورة.
  • $police  : هذا هو الخط الذي تريد استخدامه. يجب وضع رقم من 1 إلى 5 ؛ 1 = صغير ، 5 = كبير. من الممكن أيضًا استخدام خط مخصص ، ولكن يجب أن يكون لديك خطوط بتنسيق خاص سيستغرق الأمر وقتًا طويلاً جدًا حتى يتم التفصيل هنا. سنكون لذلك راضين عن الخطوط التلقائية. 
  • $x و $y  : هذه هي الإحداثيات التي تريد وضع نصك على الصورة بها. وهناك ما تقوله لنفسك: "كثيرًا ، تنبعث منه رائحة الرياضيات" (مثل معنى الرياضيات). يجب أن تعلم أن الأصل في أعلى يسار صورتك. تمثل نقطة الإحداثيات (0 ، 0) النقطة في أعلى يسار الصورة.
هنا ، في الشكل التالي ، رسم تخطيطي لصورتنا البرتقالية السابقة ، وهو حجم 200×50 200 س50 :
web dynamique php
إحداثيات الصورة
لاحظ أن إحداثيات الصورة تتوقف عند (199 ، 49) وليس عند (200 ، 50) كما قد تتوقع. في الواقع ، يجب ألا ننسى أننا نبدأ العد من 0! من 0 إلى 199 هناك بالفعل 200 نقطة.
كما ترون ، لقد قمت بتمييز النقاط الأربع على جانبي الصورة. (0 ، 0) في أعلى اليسار ، و (199 ، 49) في أسفل اليمين.
  • $texte_a_ecrire ، هذا هو ... النص الذي تريد كتابته. لا ، لا ، لا يوجد فخ.
  • $couleur إنه لون قمت بإنشائه مسبقًا imagecolorallocate .
فيما يلي مثال ملموس لما يمكننا القيام به:

<?php
header ("Content-type: image/png");
$image = imagecreate(200,50);

$orange = imagecolorallocate($image, 255, 128, 0);
$bleu = imagecolorallocate($image, 0, 0, 255);
$bleuclair = imagecolorallocate($image, 156, 227, 254);
$noir = imagecolorallocate($image, 0, 0, 0);
$blanc = imagecolorallocate($image, 255, 255, 255);

imagestring($image, 4, 35, 15, "Salut les Zéros !", $blanc);

imagepng($image);
?>
web dynamique php
يؤدي
Imagestring يمكن ترجمة السطر الذي يحتوي على  : ضع الصورة $image بالحجم 4 عند الإحداثيات (35 ، 15) ، النص "Salut les Zéros!" "، أبيض اللون .

ارسم شكلا


رسم النص جيد ، ولكن سيكون من السخف أن يقتصر على ذلك. لحسن الحظ ، لقد فكرت PHP في كل شيء!
بصفتك من مصممي رسوم بيانية للناشئين ، ستجد بالتأكيد ما تبحث عنه في كل هذه الوظائف: يمكنك إنشاء خطوط ، مستطيلات ، دوائر ، مضلعات ...
سأقدم أكثر من وظائف أدناه، وبعد ذلك سوف تظهر ما يحدث في صورة حجم   200×200 200×200، فقط للحصول على لمحة.
ImageSetPixel
دورها: لرسم بكسل في الإحداثيات  ) .

ImageSetPixel ($image, $x, $y, $couleur);
التوضيح في الشكل التالي ، وذلك بفضل الكود: ImageSetPixel ($image, 100, 100, $noir) ;
web dynamique php
imagesetpixel
IMAGELINE
يستخدم هذا لرسم خط بين نقطتي تنسيق (x1,y1) و (x2,y2)

ImageLine ($image, $x1, $y1, $x2, $y2, $couleur);
البرهان في الصورة: الشكل التالي. الكود المستخدم هو كما يلي:
ImageLine ($image, 30, 30, 120, 120, $noir) ;
web dynamique php
ImageLine
IMAGEELLIPSE
هذا واحد يرسم شكل بيضوى حيث مركزه في ($x,$y) و عرضه $largeur وارتفاعه $hauteur .

ImageEllipse ($image, $x, $y, $largeur, $hauteur, $couleur);
فيما يلي توضيح في الشكل التالي. وهنا هو الكود
ImageEllipse ($image, 100, 100, 100, 50, $noir);
web dynamique php
imageellipse
IMAGERECTANGLE
إنها ترسم مستطيلًا ، حيث ينسق الركن الأيسر العلوي منه $x1 و $y1 والزاوية اليمنى السفلية $x2 و $y2

ImageRectangle ($image, $x1, $y1, $x2, $y2, $couleur);
الشكل التالي ، لديك النتيجة الناتجة عن الكود التالي
ImageRectangle ($image, 30, 30, 160, 120, $noir);
web dynamique php
ImageRectangle
IMAGEPOLYGON
يرسم مضلع مع عدد من النقاط يساوي $nombre_de_points (إذا كان هناك ثلاث نقاط ، فمن ثم مثلث) . $array_points يحتوي الصفيف على إحداثيات جميع نقاط المضلع بالترتيب

ImagePolygon ($image, $array_points, $nombre_de_points, $couleur);
جرب ، الشكل التالي لإعطائك مثال ، كوده هو:
$points = array(10, 40, 120, 50, 160, 160);
ImagePolygon ($image, $points, 3, $noir);
imagepolygon

وظائف أكثر قوة


مستطيلات ، علامات الحذف ، خطوط ... نعم ، هل هذا كل ما يمكننا فعله؟
بالطبع لا ! هناك وظائف أخرى أريد أن أريك اياها تمامًا لأنها تسمح لك بإجراء عمليات أكثر تعقيدًا!
سنتعلم:
  • اجعل الصورة شفافة
  • خلط صورتين.
  • تغيير حجم الصورة ، لإنشاء صورة مصغرة على سبيل المثال.
آمل أنك لا تزال في حالة جيدة ، سيكون من الضرر أن تغفو على أكثر الوظائف إثارة للاهتمام.
اجعل الصورة شفافة
بادئ ذي بدء ، يجب أن تعرف أن PNG فقط هو الذي يمكن جعله شفافًا. في الواقع ، واحدة من العيوب الكبيرة في JPEG هي أنها لا تدعم الشفافية. إذن نحن هنا بصدد العمل على PNG .
جعل صورة شفافة سهلة بشكل لا يصدق. فقط استخدم الوظيفة imagecolortransparent وأخبرها عن اللون الذي تريد أن تجعله شفافًا. تستخدم هذه الوظيفة مثل هذا:

<?php
imagecolortransparent($image, $couleur);
?>
سأستخدم مثال الصورة حيث كتبت "Salut les Zéros !" على خلفية برتقالية قديمة ، سأضيف الوظيفة imagecolortransparent لجعل هذه الخلفية شفافة:

<?php
header ("Content-type: image/png");
$image = imagecreate(200,50);

$orange = imagecolorallocate($image, 255, 128, 0); // Le fond est orange (car c'est la première couleur)
$bleu = imagecolorallocate($image, 0, 0, 255);
$bleuclair = imagecolorallocate($image, 156, 227, 254);
$noir = imagecolorallocate($image, 0, 0, 0);
$blanc = imagecolorallocate($image, 255, 255, 255);

imagestring($image, 4, 35, 15, "Salut les Zéros !", $noir);
imagecolortransparent($image, $orange); 
imagepng($image);
?>
مزيج صورتين
هذا الأمر أكثر تعقيدًا قليلاً من جعل الصورة شفافة ، ولكن مهلا ، يمكنني أن أطمئنك: إنها ليست مستحيلة للتغلب عليها على أي حال وهي تستحق بعض الجهد.
تتيح لك الوظيفة التي سأقدمها لك "دمج" صورتين بالاعتماد على تأثير الشفافية. يبدو كأنه ملتوي ، لكنه في الحقيقة شيء رائع حقًا!
يمكننا استخدامه على سبيل المثال لعرض شعار موقع على صورة ما.
انظر الشعار في الشكل التالي.
web dynamique php
وفي الشكل التالي ، الصورة المعنية.
web dynamique php
صورة ليتم وضع علامة مع الشعار
الوظيفة التي تجعل من الممكن تنفيذ الاندماج بين صورتين هي imagecopymerge .
هذا النص أكبر قليلاً من النصوص الأخرى ، لذلك أفضل أن أقدمه لك فورًا. ساوضح لك مباشرة بعد ذلك كيف يعمل.

<?php
header ("Content-type: image/jpeg"); // الصورة التي سنقوم بإنشائها هي jpeg

// نقوم بتحميل الصور أولا
$source = imagecreatefrompng("logo.png"); // الشعار هو المصدر
$destination = imagecreatefromjpeg("couchersoleil.jpg"); // الصورة هي الوجهة

//  تُرجع العرض والارتفاع imagesx وimagesy وظائف
$largeur_source = imagesx($source);
$hauteur_source = imagesy($source);
$largeur_destination = imagesx($destination);
$hauteur_destination = imagesy($destination);

// نريد وضع الشعار في أسفل اليمين ، فنحن نحسب الإحداثيات حيث يجب وضع الشعار على الصورة
$destination_x = $largeur_destination - $largeur_source;
$destination_y =  $hauteur_destination - $hauteur_source;

// نضع الشعار (المصدر) في صورة الوجهة (الصورة)
imagecopymerge($destination, $source, $destination_x, $destination_y, 0, 0, $largeur_source, $hauteur_source, 60);

// نعرض صورة الوجهة التي تم دمجها مع الشعار
imagejpeg($destination);
?>
يوضح الشكل التالي نتيجة هذا الكود.
web dynamique php
تم دمج الشعار في الصورة
Imagecopymerge إنها ميزة رائعة حقًا ، حيث ستتمكن الآن من "نسخ" جميع الصور الموجودة على موقعك تلقائيًا إذا كنت تريد ذلك.
ومع ذلك ، فإن النص المستخدم هنا هو أكثر تعقيدًا قليلاً ، وأعتقد أنه لن يتم رفض بعض التفسيرات.
وهنا النقاط التي علينا فهمها.
  • في هذا السيناريو ، نتعامل مع صورتين : $source (الشعار) و  $destination ( الصورة) . يتم إنشاء كلاهما باستخدام الوظيفة imagecreatefrompng (  fromjpeg للصورة ) .
  • ثم هناك سلسلة كاملة من العمليات الحسابية بناءً على الإحداثيات وعرض الصور وارتفاعها. أتصور أنه يجب أن يكون قد أخافك ، لكنه في الواقع بسيط للغاية طالما أنك تعرف كيفية القيام بعملية الطرح.
هدفنا هو معرفة الإحداثيات لوضع الشعار على الصورة. أريد أن أضعها في أسفل اليمين. لذلك ، أنا بحاجة إلى معرفة أبعاد الصور. I استخدام وظائف imagesx و imagesy لاسترداد أبعاد الشعار والصورة. ثم ، لوضع الشعار في الأسفل ، عليك وضعه في موضعه $hauteur_de_la_photo - $hauteur_du_logo . وفعلت الشيء نفسه لوضع الشعار على اليمين: $largeur_de_la_photo - $largeur_du_logo . إذا كنت أرغب في وضع الشعار في الجزء العلوي الأيسر ، فسيكون الأمر أبسط من ذلك بكثير: لا حاجة لإجراء عمليات حسابية ، حيث أن الإحداثيات في الجزء العلوي الأيسر هي (0 ، 0) !
  • ثم تأتي imagecopymerge أهم وظيفة. يستغرق العديد من المُدخلات. ما تحتاج إلى معرفته هو أنه يحتاج إلى صورتين: مصدر ووجهة. يقوم بتعديل الصورة الوجهة (هنا ، الصورة) لدمج الصورة المصدر. هذا ما يفسر السبب في $destination أننا نعرضها في النهاية ، وليس $source (الشعار) الذي لم يتغير.
المُدخلات التي يجب إعطاءها للوظيفة هي بالترتيب التالي.
  1. الصورة الوجهة  : هنا $destination، الصورة. هذه هي الصورة التي سيتم تعديلها والتي نضع شعارنا عليها.
  2. الصورة المصدر  : هنا $source هو شعارنا. لم يتم تغيير هذه الصورة.
  3. المحرف الذي تريد وضع الشعار عليه في الصورة  : هذه هي حاشية النقطة الموجودة في الموضع $largeur_de_la_photo - $largeur_du_logo .
  4. الإحداثي الذي ترغب في وضع الشعار فيه على الصورة  : بالمثل ، هو إحداثي النقطة على الصورة (هنا ، $hauteur_de_la_photo - $hauteur_du_logo ) .
  5. حدود المصدر  : في الواقع ، فإن الوظيفة imagecopymerge تتيح أيضًا أخذ جزء فقط من الصورة المصدر. قد يصبح الأمر معقدًا بعض الشيء ، لذلك سنقول إننا نأخذ الشعار بالكامل. لذلك نبدأ من النقطة التي تقع عند إحداثيات (0 ، 0) للمصدر . ضع 0 للمحررة.
  6. إحداثيات المصدر  : الشيء نفسه بالنسبة للإحداثيات . ضع 0
  7. عرض المصدر  : هو العرض الذي يحدد أي جزء من الصورة المصدر ستلتقطه. نلتقط الصورة المصدر بأكملها ، لذلك $largeur_source .
  8. ارتفاع المصدر  : نفسه ، وضعت $hauteur_source .
  9. نسبة الشفافية  : هو رقم يتراوح بين 0 و 100 مما يدل على شفافية شعارك على الصورة. إذا وضعت 0 ، سيكون الشعار غير مرئي (شفاف تمامًا) ، وإذا وضعت 100 ، فسيكون غير شفاف تمامًا (لن يكون هناك تأثير "دمج"). ضع رقمًا حول 60-70 ، بشكل عام جيد. 
بشكل ملموس ، يمكننا استخدام هذا الكود لإنشاء صفحة copyrighter.php . ستأخذ هذه الصفحة مُدخلا واحدا: اسم الصورة التي تريد وضع "copyright" عليها.
على سبيل المثال ، إذا كنت تريد "حقوق الطبع والنشر" تلقائيًا tropiques.jpg، فستعرض الصورة بالشكل التالي:

<img src="copyrighter.php?image=tropiques.jpg" />
الآن جاء دورك لكتابة الصفحة copyrighter.php .
إذا استندت في النص الذي أعطيته لك ، فلا ينبغي أن يكون طويلاً. عليك فقط استرداد اسم الصورة المراد تحميلها (عبر المتغير $_GET['image']) . فقط ، هذا كل شيء ، قلت لك كل شيء.
تغيير حجم الصورة
هذه هي واحدة من الميزات الأكثر إثارة للاهتمام في مكتبة GD ، حسب ذوقي. تسمح لنا بإنشاء صور مصغرة لصورنا.

يمكنك استخدامها على سبيل المثال لإنشاء معرض للصور. يمكنك عرض الصور المصغرة وإذا نقرت على واحدة منها ، فإنها تعرضها بحجمها الأصلي.
لتغيير حجم الصورة ، سوف نستخدم الوظيفة imagecopyresampled . إنها واحدة من أكثر الوظائف تقدماً لأنها توفر الكثير من العمليات الحسابية لإنشاء صورة مصغرة ذات جودة جيدة. النتيجة جيدة للغاية ، لكنها تعطي الكثير من العمل للمعالج.

هذه الوظيفة قوية لكنها بطيئة. بطيئة للغاية حتى أن بعض المضيفين قاموا بإلغاءها. سيكون من الانتحار عرض الصورة مباشرة في كل مرة يتم فيها تحميل الصفحة. سنقوم هنا بإنشاء الصورة المصغرة مرة واحدة وإلى الأبد وحفظها في ملف.
وبالتالي ، سنحفظ الصورة المصغرة الخاصة بنا في ملف (  mini_couchersoleil.jpg على سبيل المثال). هذا يعني أنه يمكننا بالفعل إزالة السطر الأول ( header) الذي لم يعد مفيدًا.

بالنسبة إلى imagecopymerge ، سنحتاج إلى صورتين: المصدر والوجهة. المصدر هنا هو الصورة الأصلية والوجهة ، الصورة المصغرة التي سننشئها.
أول ما يجب فعله هو إنشاء صورة فارغة جديدة ... مع أي وظيفة؟ imagecreate ؟ نعم ، إنها الإجابة الصحيحة تقريبًا.

تكمن المشكلة التي تراها imagecreate في إنشاء صورة جديدة يكون عدد ألوانها محدودًا (بحد أقصى 256 لونًا بشكل عام). ومع ذلك ، قد تحتوي الصورة المصغرة لدينا على ألوان أكثر من الصورة الأصلية بسبب العمليات الحسابية.
ولذا فإننا سوف تضطر إلى استخدام وظيفة أخرى وأنا لم أتحدث عنها بعد: imagecreatetruecolor . إنها تعمل بنفس الطريقة imagecreate ولكن هذه المرة ، قد تحتوي الصورة على العديد من الألوان.
إليك الكود الذي سأستخدمه لإنشاء الصورة المصغرة لصوري couchersoleil.jpg :

<?php
$source = imagecreatefromjpeg("couchersoleil.jpg"); // La photo est la source
$destination = imagecreatetruecolor(200, 150); // On crée la miniature vide

// تُرجع العرض والارتفاع للصورة imagesx وimagesy وظائف 
$largeur_source = imagesx($source);
$hauteur_source = imagesy($source);
$largeur_destination = imagesx($destination);
$hauteur_destination = imagesy($destination);

// ننشأ الصورة المصغرة
imagecopyresampled($destination, $source, 0, 0, 0, 0, $largeur_destination, $hauteur_destination, $largeur_source, $hauteur_source);

// "mini_couchersoleil.jpg" نحفظ الصورة المصغرة باسم 
imagejpeg($destination, "mini_couchersoleil.jpg");
?>
من قبل ، كانت الصورة تشبه الشكل التالي . بفضل imagecopyresampled، حصلنا على نسخة مصغرة (الشكل التالي).
web dynamique php
الصورة الأصلية
web dynamique php
الصورة بعد تغيير حجمها
يمكنك بعد ذلك عرض الصورة باستخدام كود HTML :
<img src="mini_couchersoleil.jpg" alt="Coucher de soleil" />
أنشأنا الصورة المصغرة مصغرة باستعمال  imagecreatetruecolor بأبعاد مخفضة (  200 × 150 ). لقد شرحت بالفعل وظائف  imagesx و  imagesy ، أنا لا أصدق ذلك. دعونا نرى ما هي المُدخلات للوظيفة imagecopyresampled .
  1. الصورة الوجهة : هذه هي $destination الصورة التي أنشأناها معها imagecreatetruecolor .
  2. الصورة المصدر : الصورة التي نريد إنشاء الصورة المصغرة لها ؛ هنا ، لدينا couchersoleil.jpg محملة imagecreatefromjpeg .
  3. حدود النقطة التي تضع فيها الصورة المصغرة على الصورة الوجهة : من أجل البساطة ، سنقول أن الصورة المقصودة لدينا ستحتوي فقط على الصورة المصغرة. لذلك سنضع الصورة المصغرة في الإحداثيات (0 ، 0) ، مما يعني أنه يجب علينا وضع 0 على هذه القيمة.
  4. ترتيب النقطة التي تضع فيها الصورة المصغرة على الصورة الوجهة : لنفس الأسباب ، ضع 0.
  5. حدود نقطة المصدر : هنا ، نلتقط الصورة المصدر بأكملها ونصنع صورة مصغرة. لأخذ كل شيء ، يجب أن تبدأ من النقطة (0 ، 0) ، مما يعني أننا هنا نضع 0 على هذه القيمة مرة أخرى.
  6. إحداثي نقطة المصدر : لا يزال 0.
  7. عرض الصورة المصغرة : واحدة من أهم المُدخلات ، والتي تحدد حجم الصورة المصغرة المراد إنشاؤها. في حالتنا ، يبلغ عرض الصورة المصغرة 200 بكسل. قمنا بتخزين هذا الرقم في المتغير $largeur_destination .
  8. ارتفاع الصورة المصغرة : نفس الشيء ينطبق على ارتفاع الصورة المصغرة المراد إنشاؤها.
  9. عرض المصدر : فقط أشر إلى حجم الصورة المصدر. قمنا بتخزين هذه القيمة في $largeur_source، لذلك نعيد استخدامها هنا.
  10. ارتفاع المصدر : الشيء نفسه بالنسبة للارتفاع.
كما ترى ، imagecopyresampled يتيح لك القيام بالكثير من الأشياء ، وبشكل عام لن نستخدم كل شيء.
توجد عدة مُدخلات في 0 ، ولا يستحق الأمر حقًا محاولة فهم السبب (حتى لو لم يكن الأمر معقدًا للغاية). استخدم مثالي لإنشاء الصور المصغرة الخاصة بك ، وانتهى الامر.

في الخلاصة


  • يقوم PHP بأكثر من مجرد إنشاء صفحات ويب HTML . باستخدام الملحقات ، مثل مكتبة GD ، يمكنك على سبيل المثال إنشاء صور.
  • لكي تقوم صفحة PHP بإرجاع صورة بدلاً من صفحة ويب ، يجب تعديل رأس HTTP باستخدام الوظيفة header() التي ستقوم بعد ذلك بتنبيه متصفح الزائر بوصول صورة.
  • من الممكن حفظ الصورة على القرص الصلب إذا رغبت في ذلك ، مما يتجنب الاضطرار إلى إنشائها في كل مرة يتم فيها استدعاء صفحة PHP .
  • يمكنك إنشاء صور باستخدام GD من صورة فارغة أو من صورة موجودة بالفعل.
  • يوفر GD وظائف لكتابة النص في صورة ورسم الأشكال الأساسية.
  • تتيح لك وظائف GD الأكثر تقدماً دمج الصور أو تغيير حجمها.