How to add Text to Image using PHP

By

April 22, 2013PHP2 Comments

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:

Add text to image using php

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.

add text to image-form

 

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 />

 

Demo

Download Source code

Read our latest PHP tutorials.

2 Responses to “How to add Text to Image using PHP”
  1. Raj

    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

    • Jeyaganesh

      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.

Leave a Reply

*