This functionality is used to create pictures with text by using the PHP GD library.
It is a straightforward process and also better than the users' default avatar picture looks.
Includes Tutorial Files
- jQuery Plugin
- phptextClass file
- True Type Font
- Demo HTML file
- Demo submit PHP file
Features
- When users do not upload their picture, then we can use this functionality.
- A picture will be generated automatically when the user provides a name.
- We can use the first letter of name or words.
- After the successful execution, status and image path will returns.
- Gmail applications are also using this kind of functionality to display the first letter of mail subject.
phptextClass.php
Main class file with phptext, hexToRGB and ImageTTFCenter function.
<?php
/*phptext class, version 1.0
created by www.w3schools.in (Gautam kumar)
April 26, 2014
*/
class phptextClass
{
public function phptext($text,$textColor,$backgroundColor='',$fontSize,$imgWidth,$imgHeight,$dir,$fileName)
{
/* settings */
$font = './calibri.ttf';/*define font*/
$textColor=$this->hexToRGB($textColor);
$im = imagecreatetruecolor($imgWidth, $imgHeight);
$textColor = imagecolorallocate($im, $textColor['r'],$textColor['g'],$textColor['b']);
if($backgroundColor==''){/*select random color*/
$colorCode=array('#56aad8', '#61c4a8', '#d3ab92');
$backgroundColor = $this->hexToRGB($colorCode[rand(0, count($colorCode)-1)]);
$backgroundColor = imagecolorallocate($im, $backgroundColor['r'],$backgroundColor['g'],$backgroundColor['b']);
}else{/*select background color as provided*/
$backgroundColor = $this->hexToRGB($backgroundColor);
$backgroundColor = imagecolorallocate($im, $backgroundColor['r'],$backgroundColor['g'],$backgroundColor['b']);
}
imagefill($im,0,0,$backgroundColor);
list($x, $y) = $this->ImageTTFCenter($im, $text, $font, $fontSize);
imagettftext($im, $fontSize, 0, $x, $y, $textColor, $font, $text);
if(imagejpeg($im,$dir.$fileName,90)){/*save image as JPG*/
return json_encode(array('status'=>TRUE,'image'=>$dir.$fileName));
imagedestroy($im);
}
}
/*function to convert hex value to rgb array*/
protected function hexToRGB($colour)
{
if ( $colour[0] == '#' ) {
$colour = substr( $colour, 1 );
}
if ( strlen( $colour ) == 6 ) {
list( $r, $g, $b ) = array( $colour[0] . $colour[1], $colour[2] . $colour[3], $colour[4] . $colour[5] );
} elseif ( strlen( $colour ) == 3 ) {
list( $r, $g, $b ) = array( $colour[0] . $colour[0], $colour[1] . $colour[1], $colour[2] . $colour[2] );
} else {
return false;
}
$r = hexdec( $r );
$g = hexdec( $g );
$b = hexdec( $b );
return array( 'r' => $r, 'g' => $g, 'b' => $b );
}
/*function to get center position on image*/
protected function ImageTTFCenter($image, $text, $font, $size, $angle = 8)
{
$xi = imagesx($image);
$yi = imagesy($image);
$box = imagettfbbox($size, $angle, $font, $text);
$xr = abs(max($box[2], $box[4]))+5;
$yr = abs(max($box[5], $box[7]));
$x = intval(($xi - $xr) / 2);
$y = intval(($yi + $yr) / 2);
return array($x, $y);
}
}
?>demo_submit.php
This file is used to obtain submitted form data and used to generate an image.
<?php
include("./phptextClass.php");
if(isset($_POST['Text'])&&(trim($_POST['Text'])!=''))
{
/*get texts first letter and convert to uppercase*/
$text=strtoupper($_POST['Text']{0});
/*create class object*/
$phptextObj = new phptextClass();
/*phptext function to genrate image with text*/
echo $phptextObj->phptext($text,'#FFF','',100,260,260,'img/',time().'.jpg');
} ?>demo.html
This file is used to submit form data.
<script src="./js/jquery.min.js"></script>
<script>
$(document).on('change', '#user_name', function () {
var data = "Text="+$(this).val();
$.ajax({
type: 'POST',
url: "./demo_submit.php",
data: data,
dataType:"json",
success: function(html) {
obj = JSON.parse(JSON.stringify(html));
if(obj.status){
$("#imgArea>img").prop('src',obj.image);
}
}
});
});
</script>
<form enctype="multipart/form-data" action="image_upload_demo_submit.php" method="post" name="image_upload_form" id="image_upload_form">
<div id="imgArea"><img src="./img/default.jpg"></div>
<p>
<label for="user_name">Name: </label>
<input type="text" name="user_name" id="user_name">
</p>
</form>