ساخت تصویر کاربری پیشفرض از روی نام کاربر با PHP

در بسیاری از موارد نیاز است برای کاربر عضو سایت یا حتی کاربر میهمان که قصد انتشار یک دیدگاه یا ارسال تیکت دارد ، یک تصویر کاربری یا به بیان دیگر آواتار پیشفرض داشته باشیم. 

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

معایب این روش چیست ؟ 

1. ممکن است کاربر ایمیل نداشته باشد که د راین صورت تصویر پیشفرض بی ربطی جایگزین میشود


2. افت شدید سرعت به علت اتصال به وب سرویس گراواتار ، مخصوص در ایران 


3. شلوغی سرورهای گراواتار و گاهی قطعی کامل و لود نشد وب سایت ما فقط به خاطر انتظار برای لود یک تصویر.


4. اگر تعداد زیادی تصویر گراواتاری در یک جا مثلا لیست کامنت ها باشد تمام موارد بالا را ضرب در تعداد کنید == فاجعه

ما باید یک سرویس ساخت تصویر داشته باشیم که اولا تصویر ساخته شده ارتباطی با آن کاربر داشته باشد و دوما سرعت ساخت و لود بالا داشته باشد.

در این روش ما به کمک کتابخانه GD در PHP و ساخت یک تصویر کاملا بهینه و استاندارد در قالب تصویر WEBP میتوانیم از تمام معایب بالا رها شویم .

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

به عنوان مثال یک کاربر میهمان در زیر یک محصول نظری را منتشر میکند و نام و نام خانوادگی خود را مینویسد و نظر را منتشر میکند. حال یک تصویر کاربری برای وی ساخته میشود که حرف اول نام و حرف اول نام خذنوادگی وی است.

این تصویر جایی ذخیره نمیشود و کاملا لایو است و فضایی را اشغال نمیکند. این یکی از مزایای استفاده از این روش است.

تابع زیر وظیفه ساخت دیتای تصویر را دارد.

/**
تابع کمکی برای تشخیص پارسی یا انگلیسی بودن
*/
 function TextIsPersian($str){
        return preg_match('/[\x{0600}-\x{06FF}]/u', $str);
};

/**
تابع کمکی تبدیل متن به حالت ایمن در URL
*/
 function B64Uec($str){
        return urlencode(base64_encode($str));
};



/**
تابع اصلی تبدیل
*/
function AvatarWebp(
     $text,
     $size = 128,
     $bgColorHex = '',
     $color = ""
   
) {

$bgColorHex = strlen($bgColorHex)>3 ? $bgColorHex : '#5A0067';
$color =strlen($color)>3 ? $color : '#F6AA09';

$sep = " ";

$faFontPath = 'fonts'.DS.'IranSans-B.ttf' ;
$enFontPath =  'fonts'.DS.'Inter-B.ttf';
 
$text = urldecode($text);
$text = base64_decode($text);

$first = "";
$end = "";

$exp = explode(" ",$text);

$first = $exp[0];
$end = $exp[1] ?? "";

$text = "";


if(TextIsPersian($first) || TextIsPersian($end) ){
$first = mb_substr($first,0,1);
$end = mb_substr($end,0,1);


}else{
$first =substr($first,0,1);
$end =substr($end,0,1);
$first = ucfirst($first );
$end =ucfirst($end);

}


if(TextIsPersian($first) || TextIsPersian($end) ){

$text = ($first && $end    ?   $end . $sep .$first     :   ($first && !$end   ?  $first : '?' )  );
}else{
$text = $first.($end ?  $sep .$end : "");

}



$text = "  ".$text."  ";


    // --- Helpers ---
    $hexToRgb = function($hex) {
        $hex = ltrim($hex, '#');
        if(strlen($hex) === 3){
            $hex = $hex[0].$hex[0].$hex[1].$hex[1].$hex[2].$hex[2];
        }
        return [
            hexdec(substr($hex,0,2)),
            hexdec(substr($hex,2,2)),
            hexdec(substr($hex,4,2))
        ];
    };

    // luminance check → جلوگیری از بکگراند روشن
    $isTooLight = function($r,$g,$b){
        // perceived luminance
        $l = (0.299*$r + 0.587*$g + 0.114*$b);
        return $l > 160; // اگر خیلی روشن باشد
    };

    // detect persian
    $isPersian = function($str){
        return preg_match('/[\x{0600}-\x{06FF}]/u', $str);
    };

    // --- Color ---
    list($r,$g,$b) = $hexToRgb($bgColorHex);

    if($isTooLight($r,$g,$b)){
        // اگر رنگ خیلی روشن بود → خودکار تیره‌ترش می‌کنیم
        $r = intval($r * 0.4);
        $g = intval($g * 0.4);
        $b = intval($b * 0.4);
    }

    // --- Image Create ---
    $img = imagecreatetruecolor($size, $size);

    imagealphablending($img, true);
    imagesavealpha($img, true);

    $bg = imagecolorallocate($img, $r, $g, $b);
      list($r,$g,$b) = $hexToRgb($color);
    $white = imagecolorallocate($img, $r,$g,$b);

    imagefill($img, 0, 0, $bg);

    // --- Font Select ---
    $font = TextIsPersian($first) ? $faFontPath : $enFontPath;

    // --- Font Size Auto ---
    // حدودی برای متن کوتاه
    $fontSize = $size * 0.5;

    // کاهش سایز اگر متن بیشتر از 2 کاراکتر
    if(mb_strlen($text) >= 3) $fontSize = $size * 0.38;
    if(mb_strlen($text) >= 5) $fontSize = $size * 0.28;

    // --- Center Text ---
    $box = imagettfbbox($fontSize, 0, $font, $text);

    $textWidth  = abs($box[4] - $box[0]);
    $textHeight = abs($box[5] - $box[1]);

    $x = ($size - $textWidth) / 2;
    $y = ($size + $textHeight) / 2;

    imagettftext($img, $fontSize, 0, $x, $y, $white, $font, $text);

    // --- Output WebP to Memory ---

    ob_start();
    imagewebp($img, null, 90);
    $data = ob_get_clean();

    imagedestroy($img);

    return $data;
}

در تابع بالا یک نکته را باید توجه کنید و آن مسیر فونت است. برای حروف پارسی یک فونت و برای حروف انگلیسی فونتی دیگر در نظر گرفتیم. البته میتوانید هر دو را یکی قرار بدید.

منظور از مسیر فونت به هیچ وجه آدرس URL نیست  یعنی شما فونت را در مسیر public_html/fonst/iransans.ttf قرار دادید و حالا مسیر را مانند https://mywebsite.com/fonts/iransans.ttf بگذارید . این کاملا اشتباه است.  

مسیر فیزیکی روی سرور را باید قرار بدهید مثلا اگر پوشه حاوی فونت دقیقا در کنار همین فایل php حاوی ایک کدها هست اینجور آدرس بدید fonsts/iransans.ttf . 

در این مورد کمک لازم داشتید کامنت بگذارید راهنمایی میکنم.



حالا چگونه استفاده کنیم؟؟؟؟؟

شما کافیست یک فایل php در روت سایت یا هر مسیر دلخواه بسازید تا با اجرای آن در آدرس بار مرورگر و پاس دادن یکسری اطلاعات عکس را بسازید.


من یک فایل php با نام avatar.php در روت میسازم یعنی با آدرس مثلا https://mysite.com/avatar.php قابل دسترسی است.

درون این فایل کدهای زیر را میگذارم.

<?php
while(ob_get_level())
ob_end_clean();

/**
تابع کمکی برای تشخیص پارسی یا انگلیسی بودن
*/
 function TextIsPersian($str){
        return preg_match('/[\x{0600}-\x{06FF}]/u', $str);
};

/**
تابع کمکی تبدیل متن به حالت ایمن در URL
*/
 function B64Uec($str){
        return urlencode(base64_encode($str));
};



/**
تابع اصلی تبدیل
*/
function AvatarWebp(
     $text,
     $size = 128,
     $bgColorHex = '',
     $color = ""
   
) {

$bgColorHex = strlen($bgColorHex)>3 ? $bgColorHex : '#5A0067';
$color =strlen($color)>3 ? $color : '#F6AA09';

$sep = " ";

$faFontPath = 'fonts'.DS.'IranSans-B.ttf' ;
$enFontPath =  'fonts'.DS.'Inter-B.ttf';
 
$text = urldecode($text);
//$text = base64_decode($text);

$first = "";
$end = "";

$exp = explode(" ",$text);

$first = $exp[0];
$end = $exp[1] ?? "";

$text = "";


if(TextIsPersian($first) || TextIsPersian($end) ){
$first = mb_substr($first,0,1);
$end = mb_substr($end,0,1);


}else{
$first =substr($first,0,1);
$end =substr($end,0,1);
$first = ucfirst($first );
$end =ucfirst($end);

}


if(TextIsPersian($first) || TextIsPersian($end) ){

$text = ($first && $end    ?   $end . $sep .$first     :   ($first && !$end   ?  $first : '?' )  );
}else{
$text = $first.($end ?  $sep .$end : "");

}



$text = "  ".$text."  ";


    // --- Helpers ---
    $hexToRgb = function($hex) {
        $hex = ltrim($hex, '#');
        if(strlen($hex) === 3){
            $hex = $hex[0].$hex[0].$hex[1].$hex[1].$hex[2].$hex[2];
        }
        return [
            hexdec(substr($hex,0,2)),
            hexdec(substr($hex,2,2)),
            hexdec(substr($hex,4,2))
        ];
    };

    // luminance check → جلوگیری از بکگراند روشن
    $isTooLight = function($r,$g,$b){
        // perceived luminance
        $l = (0.299*$r + 0.587*$g + 0.114*$b);
        return $l > 160; // اگر خیلی روشن باشد
    };

    // detect persian
    $isPersian = function($str){
        return preg_match('/[\x{0600}-\x{06FF}]/u', $str);
    };

    // --- Color ---
    list($r,$g,$b) = $hexToRgb($bgColorHex);

    if($isTooLight($r,$g,$b)){
        // اگر رنگ خیلی روشن بود → خودکار تیره‌ترش می‌کنیم
        $r = intval($r * 0.4);
        $g = intval($g * 0.4);
        $b = intval($b * 0.4);
    }

    // --- Image Create ---
    $img = imagecreatetruecolor($size, $size);

    imagealphablending($img, true);
    imagesavealpha($img, true);

    $bg = imagecolorallocate($img, $r, $g, $b);
      list($r,$g,$b) = $hexToRgb($color);
    $white = imagecolorallocate($img, $r,$g,$b);

    imagefill($img, 0, 0, $bg);

    // --- Font Select ---
    $font = TextIsPersian($first) ? $faFontPath : $enFontPath;

    // --- Font Size Auto ---
    // حدودی برای متن کوتاه
    $fontSize = $size * 0.5;

    // کاهش سایز اگر متن بیشتر از 2 کاراکتر
    if(mb_strlen($text) >= 3) $fontSize = $size * 0.38;
    if(mb_strlen($text) >= 5) $fontSize = $size * 0.28;

    // --- Center Text ---
    $box = imagettfbbox($fontSize, 0, $font, $text);

    $textWidth  = abs($box[4] - $box[0]);
    $textHeight = abs($box[5] - $box[1]);

    $x = ($size - $textWidth) / 2;
    $y = ($size + $textHeight) / 2;

    imagettftext($img, $fontSize, 0, $x, $y, $white, $font, $text);

    // --- Output WebP to Memory ---

    ob_start();
    imagewebp($img, null, 90);
    $data = ob_get_clean();

    imagedestroy($img);

    return $data;
}




/**

شروع کدهای خواندن درخواست متن شما و تبدیل به عکس


*/


$text = $_GET['text'] ?? "";

$size = intval($_GET['size']??64);

$color = $_GET['color'] ?? 'fff';

$bgcolor= $_GET['bgcolor'] ?? '000';


$data = AvatarWebp($text,$size,'#'.$bgcolor,'#'.$color);


header('Content-Type: image/webp');

// کش مرورگر
header("Cache-Control: public, max-age=".(3600*24*30).", immutable");

echo $data;

exit;


?>

شما میتوانید توابع را در یک فایل جداگانه قرار دهید و سچس در فایل avatar.php فقط include کنید ولی من برای راحتی کار همه را در یک جا قرار دادم.

توجه: 

با توجه به ساختار تابع AvatarWebp و فراخوانی فونت ها ، حتما در کنار فایل avatar.php یک فولدر با نام fonts داشه باشید و فونت های مورد نیاز را در آن قرار دهید.

برای سهولت در آزمایش کدها ، یک فایل زیپ حاوی فایل php و فونت ها برای دانلود قرار داده شده که در بخش فایل های ضمیمه میتوانید دانلود کنید و در روت سایت خود قرار دهید. (مهم نیست در روت باشد. میتوانید در یک فولدر با نام دلخواه در روت باشد مثلا ROOT/myfolder/...)

حال کافیست آدرس زیر را بسازید تا یک تصویر تحویل بگیرید.

https://mysite.com/avatar.php?text=علی دایی&size=256&color=fff000&bgcolor=000

دموی زیر را ببینید:

https://demo.zhupin.ir/avatar.php?text=علی دایی&size=256&color=fff000&bgcolor=000