Using PHP’s image functions we can able to add text on a image or a background programmatically using PHP.In this tutorial we will be designing a webform through which you enter the text and create an image file that will have the submitted text.
Final Output:
Final output after adding text
Things needed: Background image and font file
Here I have used the chunkyfive open type font to style the text.Different fonts can be used by adding otf file.
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <br /> <?php<br /> // Select the background image<br /> $imgPath = 'background.png';<br /> $im = imagecreatefrompng($imgPath); //Font colour<br /> $white = imagecolorallocate($im, 255, 255, 255); // Path to font file<br /> $font = 'Chunkfive.otf'; // Write it<br /> imagettftext($im, 35, 0, 95, 100, $white, $font, '15.7 MBPS');<br /> imagettftext($im, 25, 0, 95, 200, $white, $font, 'Average Internet speed in');<br /> imagettftext($im, 25, 0, 125, 200, $white, $font, 'South Korea'); // Output to browser<br /> header('Content-Type: image/png'); //write the final image to a file<br /> imagepng($im,"output.png");<br /> imagedestroy($im); ?><br /> |
imagecreatefrompng: Function will read the png file.
imagecolorallocate: Set the colour of the text.
imagettfbbox: This function will create a bounding box inside which we will be writing the text.For this X and Y coordinates have to be provided
imagettftext: Actual image that writes the text to the image.
Design a html form that accepts text to be added on the image.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <br /> < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" type="text/css" href="view.css" media="all"/> <script type="text/javascript" src="view.js"></script> </head><br /> <body id="main_body" > <div id="form_container"> <h1><a>Text on Image</a></h1> <form id="form_616612" class="appnitro" method="post" action="index.php"> <div class="form_description"> <h2>Text on Image</h2> Enter the words below to display on the image </div> <ul> <li id="li_1" > <label class="description" for="element_1">Heading </label> <div> <input id="element_1" name="heading" class="element text medium" type="text" maxlength="255" value=""/> </div> </li> <li id="li_2" > <label class="description" for="element_2">Line 1 </label> <div> <input id="element_2" name="line1" class="element text medium" type="text" maxlength="255" value=""/> </div> </li> <li id="li_3" > <label class="description" for="element_3">Line2 </label> <div> <input id="element_3" name="line2" class="element text medium" type="text" maxlength="255" value=""/> </div> </li> <li class="buttons"> <input type="hidden" name="form_id" value="616612" /><br /> <br /> <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" /> </li> </ul></form> </div> </body><br /> </html><br /> |
HI
osum post ,
& i need some more
can u say me how to get the link of the pic ??
after adding text to php it gives final pic nah ,i want the image to be uploaded some image hosting sites and getting links
in php
can u help me ?
tnx in advance
It depends on how you implement the third party image hosting site.If you are using any API then check if they offer the image url after upload completes.