درج متن بر روی تصـاویر در PHP به صورت فارسی و انگلیسی

[Master Badfar]

به نام خـدا
سلام دوستان امیدوارم حالتون خوب باشه...

شاید تا به حال برای ساخت کپچا (CAPTCHA) و یا کارهای دیگه نیاز پیدا کرده باشین که روی تصاویر یک مطلب با نوشته رو درج کنین. در این تاپیک به بررسی نحوه انجام این کار می پردازیم.

---

درج نوشـته های انگلیسی:
برای درج یک نوشته به زبان انگلیسی در PHP چالش خاصی نداریم چرا که توابع بومی PHP به طور پیشفرض به ما اجازه این کار رو میدن. در واقع این کار به کمک تابع بومـی imagettftext() به سادگی انجام میشه. البته میتونیم از تابع imagestring() هم کمک بگیریم اما چون میخوایم فونت های دلخواه خودمون رو اعمال کنیم پس از تابع imagettftext() استفاده می کنیم. نحوه استفاده از تابع یاد شده به شکل زیر هست:

کد:

imagettftext ( resource , fontsize , angle , x , y , color , fontfile , text );

شرح آرگومان ها (ورودی های) تابع:

• * آرگومان resource بیانگر منبع تصویر هست. این منبع میتونه خروجی توابعی مثل imagecreatefromjpg() یـا imagecreate() و ... باشه. شاید متوجه لفظ منبع تصویر نشده باشین. در PHP زمانی که ما یک فایل تصویری (با فرمت PNG یا JPG) در یک دایرکتوری (پوشه) داریم و میخوایم که روی اون پردازش داشته باشیم (رنگ یک پیکسل خاص از تصویر رو بخونیم، روی تصویر متنی درج کنیم و ...) میتونیم از توابع imagecreatefrompng() یا imagecreatefromjpg() بسته به فرمت تصویر دلخواه خودمون استفاده کنیم. در واقع با کمک دو تابع یاد شده فایل تصویری که در دایرکتوری (پوشه) ذخیره داریم رو برای PHP قابل پردازش و قابل درک می کنیم. تابع imagecreate() داستان متفاوت تری داره. از این تابع زمانی استفاده می کنیم که هیچ تصویری برای پردازش نداریم و میخوایم یک تصویر ایجاد کنیم یا بسازیم. منظور از ساخت (ایجاد) تصویر در اینجا خلق بوم نقاشی نیست! صرفاً یک تصویر با ابعاد مشخص ایجاد می کنیم که یک زمینه رنگی هم میتونیم براش انتخاب کنیم. بماند که تابع imagecreate() به تنهایی دردی از ما دوا نمیکنه و لازمه از توابعی مثل imagepng() و یا imagejpeg() هم استفاده کنیم که به وقتش راجع به اونا هم صحبت می کنیم.
  
• * آرگومـان fontsize همونطور که کاملاً از اسمش مشخصه سایز فونت مطلبی که قراره روی تصویر درج کنیم رو مشخص میکنه. 
  
• * آرگومان angle به متنی که درج می کنیم برحسب درجه زاویه میده.
  
• * آرگومـان های x و y هم برای مشخص کردن طول و عرض مختصاتی از تصویر هست که قصد داریم مطلب موردنظرمون رو در اون درج کنیم. نیازی به ذکر کردن نیست که آرگومان x بیانگر طول و آرگومان y بیانگر عرض هست.
  
• * آرگـومـان color رنگ متنی که قرار هست بر روی تصویر درج بشه رو مشخص میکنه. همونطور که میدونین در دنیای کامپیوتر برای مشخص کردن رنگ ها از مدل رنگی RGB استفاده می کنیم. در واقع اساس رنگ ها در این مدل رنگی بر پایه سه رنگ اصلی قرمز، سبز و آبی هست و با تغییر مقدار هر کدوم از این سه رنگ اصلی رنگ های متفاوتی خلق میشن. با این تفاسیر، باید رنگی که مدنظرمون هست رو ابتدا در مدل رنگی RGB تعریف کنیم تا PHP بدونه چیکار کنه. یک مدل رنگی RGB به شکل زیر تعریف میشه:
  

کد:

rgb(red , green , blue)

برای اینکه فرمت RGB رنگ موردنظر خودتون رو بفهمین میتونین از این ابزار آنلاین استفاده کنین. خُب فرض کنیم مثلاً رنگ قرمز مدنظر ما باشه. فرمت RGB رنگ قرمز به شکل زیر هست:

کد:

rgb(100,0,0)

حالا چطور PHP رو توجیه کنیم که رنگ قرمز مدنظر ماست؟ برای توجیه کردن PHP کافیه از تابع imagecolorallocate() استفاده کنیم. از این تابع باید به شکل زیر استفاده کنیم:

کد:

imagecolorallocate( resource , red , green , blue);

آرگومان resource دقیقاً همونطوری هست که در ابتدای توضیحات تابع imagettftext() بحثش رو کردیم. پس یعنی باید منبع تصویر رو از طریق توابعی مثل imagecreatefrompng() و imagecreate() و ... ایجاد کنیم. آرگومان های red ، green و blue هم به مقادیر RGB مربوط میشن. با توجه به اینکه رنگ موردنظر ما طبق فرضی که داشتیم قرمز بود بنابراین آرگومان red مقدارش برابر با 100 و  آرگومان های green و red مقدارشون برابر با 0 هست. 

• * آرگومان fontfile هم نام فونت متن موردنظر رو مشخص میکنه. دقت کنین که حتماً باید فایل TTF فونت موردنظرتون در دایرکتوری (پوشه ای) که برنامه PHP قرار داره وجود داشته باشه. مقدار این آرگومان هم مشخصاً باید یک اسلش به همراه نام فونت شما و فرمتش (که همون TTF هست) به همراه یک __DIR__ قبلش باشه. مثال:
  

کد:

__DIR__ . '/نام فونت شما.ttf'

 

• * آرگومان text متن موردنظر شما جهت درج کردن بر روی تصویر رو مشخص میکنه.
  

خُب حالا که با این تابع آشنا شدیم وقتشه اون رو به کار ببندیم. فرض کنیم تصویری به شکل زیر داریم و قصد داریم متن  "Hello World!" رو با فونت  Comic Sans MS و بزرگی (اندازه) 25 و در مختصات (50 و 50) درج کنیم.

با فرض اینکه فایل TTF فونت رو در دایرکتوری که برنامه PHP مستقر هست قرار دادم و نام فایل تصویری ام  sun.jpg هست باید به شکل زیر عمل کنم:

کد php:

<?php
// تنظیم هدر HTTP
header("Content-type: image/jpeg");
// ایجاد منبع تصویر
$image = imagecreatefromjpeg('sun.jpg');
// مشخص کردن مقدار RGB رنگ قرمز
$color = imagecolorallocate($image, 100 , 0 , 0);
// متن موردنظر جهت درج کردن
$string = "Hello World!";
// درج نام فایل TTF فونت
$font =  __DIR__ . '/comic.ttf';
// درج اندازه فونت
$fontSize = 25;
// درج مختصات موردنظر
$x = 50;
$y = 50;
// استفاده از تابع
imagettftext($image, $fontSize , 0, $x, $y , $color, $font, $string);
// نمایش تصویر ایجاد شده در خروجی
imagejpeg($image);
?>

دقت کنین که تابع imagejpeg() در قطعه کد بالا به PHP میفهمونه که تصویر JPG خروجی رو نمایش بده. در واقع اگر از این تابع استفاده نمی کردیم عملاً هیچ تصویری در خروجی نداشتیم.
در نهایت خروجی به شکل زیر میشه:

تنظیم هدر HTTP در قطعه کد فوق به چه معناست؟
شاید اولین دستور قطعه کد بالا براتون کمی گنگ به نظر برسه. هدرها (Headers) در واقع به مرورگر و برنامه سمت سرور میفهمونن که با چه ورودی ها و خروجی هایی طرف هستن. در هر درخواست (Request) و هر پاسخ (Response) هدرهای HTTP مختلفی دخیل هستن. در قطعه کد بالا ما مقدار هدر Content-Type رو  image/jpeg تعریف کردیم. اینطوری مرورگر و PHP هر دو متوجه میشن که خروجی که قراره نمایش بدیم یک تصویر JPG هست نه یک متن یا رشته جیسون و یا هر چیز دیگه ای!

---

درج نوشـته های فـارسی:
همونطور که دیدین برای درج نوشته های انگلیسی هیچ چالشی نداشتیم. اما درج نوشته های فارسی روی یک تصویر به هیچ وجه خالی از دردسر نیست! متأسفانه PHP کاراکترهای زبان های فارسی و عربی رو به صورت منظم کنار هم قرار نمیده. برای حل این مشکل میتونیم از کتابخانه FarsiGD استفاده کنیم. در اصل این کتابخانه با تنظیم مجدد یونیکدها و اعمال یکسری تنظیمات خاص این مشکل رو تماماً حل میکنه.
قبل از هر چیز کتابخانه رو از این لینک دریافت کنین. حالا توی دایرکتوری موردنظرتون فایل PHP کتابخونه رو قرار بدین. تصویر موردنظرتون رو هم در همون دایرکتوری قرار بدین. حالا کافیه کتابخانه رو به کمک تابع بومی require() در PHP در کدهاتون فراخوانی کنین.
فرض کنیم قصد داریم نام یک کاربر رو در تصویری با فرمت PNG و نام  template با فونت  B Titr و بزرگی (اندازه) 80 در مختصات (310 و 685) و با رنگ قرمز درج کنیم. تصویر اولیه ما ( template.png ) به شکل زیر هست:

حالا کافیه به شکل زیر عمل کنیم:

کد php:

<?php
// فراخوانی کتابخانه
require("FarsiGD.php");
// تنظیم هدر HTTP
header("Content-type: image/png");
// ایجاد منبع تصویر
$image = imagecreatefrompng('template.png');
// مشخص کردن مقدار RGB رنگ قرمز
$color = imagecolorallocate($image, 100 , 0 , 0);
// متن موردنظر جهت درج کردن
$string = fagd("نام موردنظر شما",'fa','normal');
// درج نام فایل TTF فونت
$font =  __DIR__ . '/BTITRBD.TTF';
// درج اندازه فونت
$fontSize = 80;
// درج مختصات موردنظر
$x = 685;
$y = 310;
// استفاده از تابع
imagettftext($image, $fontSize , 0, $x, $y , $color, $font, $string);
// نمایش تصویر ایجاد شده در خروجی
imagepng($image);
?>

برای درج صحیح متن فارسی موردنظرمون باید حتماً اون متن رو به تابع fagd() به عنوان اولین آرگومان پاس بدیم. همونطور که مشخصه مقادیر آرگومان های دوم و سوم تابع fagd() همواره مقادیر ثابتی هستن. (آرگومان دوم همواره دارای مقدار  fa و آرگومان سوم همواره دارای مقدار  normal می باشد.)
دقت کنین که تابع imagepng() در قطعه کد بالا به PHP میفهمونه که تصویر PNG خروجی رو نمایش بده. در واقع اگر از این تابع استفاده نمی کردیم عملاً هیچ تصویری در خروجی نداشتیم.
در نهایت خروجی به شکل زیر خواهد بود:

نکته قابل توجه:
در صورتی که قصد داشته باشین اعداد اعشاری (مثل 25.5 یا 25/5) رو بر روی یک تصویر به صورت اعداد فارسی بنویسین باید عدد اعشاری موردنظرتون رو به جای اینکه از چپ به راست بنویسین از راست به چپ بنویسین. فرض کنین به طور مثال قصد داریم عدد اعشاری 17/25 رو به صورت اعداد فارسی بر روی یک تصویر درج کنیم. همونطور که گفتم باید از راست به چپ عدد اعشاری رو بازنویسی کنیم که یعنی عددی که ما باید به عنوان اولین آرگومان تابع fagd() وارد کنیم 25/17 خواهد شد.

---

امیدوارم این مطلب براتون مفید واقع شده باشه. 
خوشحال میشم اگر ایراد یا قسمت نامفهومی رو مشاهده کردین حتماً در ادامه گوشزد کنین.
با آرزوی بهترین ها...