Endless Paradigm / Computers & Tech / Crazy Computer / Programming / PHP Tutorial: Images and Text

Post Reply 
PHP Tutorial: Images and Text
Author Message
Mickey
Down with MJ yo

Posts: 3,663.2843
Threads: 251
Joined: 26th Apr 2008
E-Pigs: 28.7300
Offline
Post: #1
PHP Tutorial: Images and Text
I was bored and decided to play with some php and came up with this

What wee'll Need:
Make a Basic Image:
This is where you decide what size you want the final image to be. Wee'll be making use of php's imagecreate() function. Wee'll set the header to "content-type: image/png" so the browser properly displays the image. Wee'll make the png using imagepng(), then destroy it at the end using imagedestroy(). Wee'll also set a default bg color and the text color with imagecolorallocate(), the variables passed in are the image, then the r, g, b values.

PHP Code:
1
2
3
4
5
6
7
8
9
10
11
 
<?php
header('content-type: image/png');
//the 2 numbers passed in are the width and height
$image = imagecreate(400, 100);
$black = imagecolorallocate($image, 0, 0, 0);
$white = imagecolorallocate($image, 255, 255, 255);
//make img png
imagepng($image);
//destroy image
imagedestroy($image);
?>

Result:
[Image: step1.png]

Getting Text From RSS Feeds:
Wee'll use SimplePie to parse the rss feed and get the last feed from twitter. To get your twitter rss feed simply go to your twitter, right-click the rss icon, and get link location. Wee'll require simplepie, then assign the class to variable $feed.

PHP Code: 
<?php
require ('./includes/simplepie.inc');
$feed = new SimplePie('http://twitter.com/statuses/user_timeline/38334089.rss');
?>

Wee'll disable cache so the image is up to date. Wee then initialize the feed. For a list of simplepie's api go here. Wee'll set the limit to 1 so wee only get the latest twitt.

PHP Code:
1
2
3
4
5
6
 
<?php
$feed->enable_cache(false);
$feed->handle_content_type();
//set limit to 1
$max = $feed->get_item_quantity(1);
?>


The for loop is perfect for this situation so it's what I used.

PHP Code:
1
2
3
4
5
6
7
8
9
10
11
 
<?php
//for loop to get the description
for ($i = 0; $i < $max; $i++) {
    //gets the item for i, which is only the first item
    $item = $feed->get_item($i);
    //gets the current item's description
    $text = $item->get_description();
    //remove annoying "username: " from twitter's feed, replace with your own username
    $text = preg_replace('/mick3y93: /', '', $text);
}
?>

Wee add this code to the top of our script.

Spoiler for Our code so far:

PHP 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
26
27
28
29
 
<?php
//require simplepie
require ('./includes/simplepie.inc');
//initiate simple pie
$feed = new Simplepie('http://twitter.com/statuses/user_timeline/38334089.rss');
//disable cache so its up to date
$feed->enable_cache(false);
$feed->handle_content_type();
//set limit to 1
$max = $feed->get_item_quantity(1);
//for loop to get the description
for ($i = 0; $i < $max; $i++) {
    //gets the item for i, which is only the first item
    $item = $feed->get_item($i);
    //gets the current item's description and set is as $text
    $text = $item->get_description();
    //remove annoying "username: " from twitter's feed
    $text = preg_replace('/mick3y93: /', '', $text);
}
header('content-type: image/png');
//the 2 numbers passed in are the width and height
$image = imagecreate(400, 100);
$black = imagecolorallocate($image, 0, 0, 0);
$white = imagecolorallocate($image, 255, 255, 255);
//make img png
imagepng($image);
//destroy image
imagedestroy($image);
?>

Adding The Text To The Image:
Place the font file in the same directory as the index.php, name it font.ttf. Wee will use imagettftext() which accept 4 parameters, resource $image, float $size, float $angle, int $x, int $y, int $color, string $fontfile, string $text

PHP Code: 
//set where font is
$font = "./font.ttf";
//add text to image
imagettftext($image, 14, 0, 20, 70,$white, $font, $text);

This code goes in between the imagecolorallocate() and imagepng().

Spoiler for code so far:

PHP 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
26
27
28
29
30
31
32
33
 
<?php
//require simplepie
require ('./includes/simplepie.inc');
//initiate simple pie
$feed = new Simplepie('http://twitter.com/statuses/user_timeline/38334089.rss');
//disable cache so its up to date
$feed->enable_cache(false);
$feed->handle_content_type();
//set limit to 1
$max = $feed->get_item_quantity(1);
//for loop to get the description
for ($i = 0; $i < $max; $i++) {
    //gets the item for i, which is only the first item
    $item = $feed->get_item($i);
    //gets the current item's description and set is as $text
    $text = $item->get_description();
    //remove annoying "username: " from twitter's feed
    $text = preg_replace('/mick3y93: /', '', $text);
}
header('content-type: image/png');
//the 2 numbers passed in are the width and height
$image = imagecreate(400, 100);
$black = imagecolorallocate($image, 0, 0, 0);
$white = imagecolorallocate($image, 255, 255, 255);
//set where font is
$font = "./font.ttf";
//add text to image
imagettftext($image, 14, 0, 20, 70,$white, $font, $text);
//make img png
imagepng($image);
//destroy image
imagedestroy($image);
?>

Result:
I used a funky font
[Image: step2.png]
There you go, you added text parsed from an rss feed to a image you made. If you want to take it a little further you can do what I did and and a random background to the image.
I made 5 images, 400px by 100px, leaving a strip for the text, these are all png.
To randomize it i used php rand() function. I named the images bg0, bg1, bg2, etc. There are many ways to achieve this but i chose this way.

PHP Code: 
<?php
$number = rand(0,4);
?>


To use an image as background wee'll remove imagecreate() and use imagecreatefrompng().

PHP Code: 
$image = imagecreatefrompng("bg$number.png");


And wee're done! You now have a image with text from a rss feed with you custom random background.
Final Result:
[Image: index.php]

Spoiler for in case freehostia blows :/:
[Image: index.php]
The Final Script:
Spoiler for The Final Script:

PHP 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
26
27
28
29
30
31
32
33
34
35
36
37
 
<?php
//require simplepie
require ('./includes/simplepie.inc');
//initiate simple pie
$feed = new Simplepie('http://twitter.com/statuses/user_timeline/38334089.rss');
//disable cache so its up to date
$feed->enable_cache(false);
$feed->handle_content_type();
//set limit to 1
$max = $feed->get_item_quantity(1);
//for loop to get the description
for ($i = 0; $i < $max; $i++) {
    //gets the item for i, which is only the first item
    $item = $feed->get_item($i);
    //gets the current item's description
    $text = $item->get_description();
    //remove annoying "username: " from twitter's feed
    $text = preg_replace('/mick3y93: /', '', $text);
}
//set header to png
header('content-type: image/png');
//randomize a number used to select the bg
$number = rand(0, 4);
//make png from the bg's'
$image = imagecreatefrompng("bg$number.png");
//set some colors
$black = imagecolorallocate($image, 0, 0, 0);
$white = imagecolorallocate($image, 255, 255, 255);
//set where font is
$font = "./font.ttf";
//add text to image
imagettftext($image, 14, 0, 20, 70,$white, $font, $text);
//make img png
imagepng($image);
//destroy image
imagedestroy($image);
?>


Notes:
This is by no meaning the best way to do this, it's just how I decided to do it. If you have any suggestions or if i messed up anywhere please tell me so I can improve the code. If you have any questions feel free to PM me, thank you for reading
[Image: MiCk3Y.jpg]
[Image: battle.png]
Spoiler for link:
(This post was last modified: 15/07/2009 05:42 PM by Mickey.)
14/07/2009 09:58 PM
Find all posts by this user Quote this message in a reply
Mc Cabe
Storm Trooper

Posts: 1,218.1771
Threads: 177
Joined: 14th Aug 2007
Reputation: 1.43435
E-Pigs: 38.5281
Offline
Post: #2
RE: PHP Tutorial: Images and Text
awesome Mickey :)
umm?
15/07/2009 08:03 AM
Visit this user's website Find all posts by this user Quote this message in a reply
ZiNgA BuRgA
Smart Alternative

Posts: 17,022.2988
Threads: 1,174
Joined: 19th Jan 2007
Reputation: -1.71391
E-Pigs: 446.1274
Offline
Post: #3
RE: PHP Tutorial: Images and Text
Cool.  Might want to add, how to view the image (I assume this is for beginners?).
Otherwise, looks good! :P
16/07/2009 11:36 PM
Visit this user's website Find all posts by this user Quote this message in a reply
Necro-Bot
Non-existent

 
Post: #4
Thread Revived!!!
[Image: Old-LastYearAirlines.jpg]
21/10/2009 10:22 PM
Quote this message in a reply
brunoncyryl
Neophitic Presence

Posts: 3.3760
Threads: 1
Joined: 15th Oct 2009
Reputation: 0
E-Pigs: 0.7371
Offline
Post: #5
RE: PHP Tutorial: Images and Text
It's very interesting  :)
21/10/2009 10:22 PM
Find all posts by this user Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 2 Guest(s)

 Quick Theme:


Privacy Policy | Endless Paradigm | Return to Top | Return to Content | Lite (Archive) Mode | RSS Syndication