Merge two images with PHP and GD

Posted by on Apr 4, 2009 in Programming, Web Development31 comments

PHP & GDOne of the things I really wanted to incorporate into the new site design template, was a nice big, I-really-want-people-to-click-on-this-and-Subscribe-to-my-RSS-Feed image/link/button (big [what the hell is] “Web 2.0″ buttons seem to be the in thing at the moment – I didn’t want to feel left out…), which is located at the top right of the site header, under the search box (in case you missed it). That’s easy enough, so what’s the point of this article? Well, I use FeedBurner to serve my RSS Feeds, and wanted to display the cool little badge they have, which shows the number of subscribers to my Feeds. I decided I wanted to include the FeedBurner stat counter in the new big “Look! I have a Web 2.0 site too” Subscribe to my RSS Feed button, since placing it elsewhere on the site’s layout, such as one of the sidebars, just didn’t feel right. Now, as with any problem, there are numerous ways this can be done, and no one solution is right. For instance, I could have set the “No, really, it is a Web 2.0 Site” Subscribe button as a background image to an (X)HTML <div> element, and then had the FeedBurner Badge ensconced therein, but since I had my PHP IDE open at the time, I opted for the following method (which also happens to give me something to write about).

So, on to the code itself, which is actually rather embarrassingly simple:
<?php
//Set the Image source variables
$backgroundSource = "http://www.64bitjungle.com/wp-content/themes/openbook22-en/images/rss-subscribe.jpg";
$feedBurnerStatsSource = "http://feeds2.feedburner.com/~fc/64BitJungle?bg=151515&fg=ffffff&anim=0";
//Create new images
$outputImage = imagecreatefromjpeg($backgroundSource);
$feedBurnerStats = imagecreatefromgif($feedBurnerStatsSource);
//Grab width and height of the FeedBurner image
$feedBurnerStatsX = imagesx($feedBurnerStats);
$feedBurnerStatsY = imagesy($feedBurnerStats);
//Merge the two images
imagecopymerge($outputImage,$feedBurnerStats,156,50,0,0,$feedBurnerStatsX,$feedBurnerStatsY,100);
//Output header
header('Content-type: image/png');
//send new image to browser
imagepng($outputImage);
imagedestroy($outputImage);
?>

Now for the breakdown of each line. First, I put the source images into a couple of variables – the background image, located at http://www.64bitjungle.com/wp-content/themes/openbook22-en/images/rss-subscribe.jpg:

and the FeedBurner badge, located at http://feeds2.feedburner.com/~fc/64BitJungle?bg=151515&fg=ffffff&anim=0:

$backgroundSource = "http://www.64bitjungle.com/wp-content/themes/openbook22-en/images/rss-subscribe.jpg";
$feedBurnerStatsSource = "http://feeds2.feedburner.com/~fc/64BitJungle?bg=151515&fg=ffffff&anim=0";

The next significant lines, tell GD to create two new image link resources from the sources above:

$outputImage = imagecreatefromjpeg($backgroundSource);
$feedBurnerStats = imagecreatefromgif($feedBurnerStatsSource);

The FeedBurner badge is delivered as a GIF, hence the imagecreatefromgif function, and the background image is in jpeg format, so we call the imagecreatefromjpeg function. Next, we grab the height and width of the FeedBurner image using the imagesx and imagesy functions, and stick the values in a coupe of variables:

$feedBurnerStatsX = imagesx($feedBurnerStats);
$feedBurnerStatsY = imagesy($feedBurnerStats);

and then run the important function, imagecopymerge, to combine the two images:

imagecopymerge($outputImage,$feedBurnerStats,156,50,0,0,$feedBurnerStatsX,$feedBurnerStatsY,100);

Finally, the image is output to the browser in PNG format:

header('Content-type: image/png');
imagepng($outputImage);
imagedestroy($outputImage);

That’s it – painfully simple, eh? Now all that’s required is to include the new image in some (X)HTML Markup – note that the src of the image, points to the PHP file, not to a traditional JPG etc.:

<img src="http://www.64bitjungle.com/wp-content/themes/openbook22-en/subscribe-image.php" alt="Subscribe to RSS Feed" />

Et voila:

The font, by the way, is “SF Fedora”.

Tags: , ,

31 comments

» Comments RSS Feed
  1. Yup,,, it works ….!! gr8

  2. Its very good script, I like it.
    Thank you for doing this. it saves my hour..

  3. Feedburner is really very useful for syndicating feeds from other websites.’`’

  4. I have sent an image from my flash application to php and it’s sent as a byte array.(png format). Is there any way for me to transform my png byte array into one of the ‘php gd image resources’ like the one that createimagefrompng() function returns? If so, then I’d be able to following this tutorial. php GD seems to only work with those php gd image resources and not byte arrays, please help

  5. i always use feedburner to syndicate my blog posts to other subscribers.*~.

  6. i always use feedburner to syndicate my blog posts to other subscribers..:.

  7. i always syndicate feeds on my subcribers and of course feedburner is definitely a great help ;’*

  8. Hello to every one, the contents existing at this site are actually awesome for people experience,
    well, keep up the good work fellows.

  9. Pretty nice post. I just stumbled upon your weblog and wanted to say that
    I have really enjoyed browsing your blog posts. In any
    case I’ll be subscribing to your feed and I hope you write again very
    soon!

  10. Hi! Quick question that’s completely off topic.

    Do you know how to make your site mobile friendly? My web site looks weird when viewing from
    my iphone 4. I’m trying to find a template or plugin that might be able to correct this problem.
    If you have any recommendations, please share. Appreciate it!

  11. After exploring a few of the blog articles on your site, I honestly like your way of
    blogging. I book-marked it to my bookmark website list and will be checking back soon. Please check out my
    website as well and tell me what you think.

  12. I loved as much as you will receive carried out right here.
    The sketch is attractive, your authored material stylish.
    nonetheless, you command get bought an shakiness over that you wish
    be delivering the following. unwell unquestionably come further
    formerly again since exactly the same nearly very often inside case you
    shield this hike.

  13. If you are going for most excellent contents like I
    do, only pay a quick visit this web page daily as
    it provides quality contents, thanks

  14. Hello there! I could have sworn I’ve been to this website before but after checking through some
    of the post I realized it’s new to me. Nonetheless, I’m definitely happy I
    found it and I’ll be book-marking and checking back often!

  15. Today, I went to the beach front with my children. I found a sea shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She placed the shell to her ear and screamed.

    There was a hermit crab inside and it pinched her ear.
    She never wants to go back! LoL I know this is completely off topic but I had
    to tell someone!

  16. I think this is among the most significant information for me.
    And i’m glad reading your article. But should remark on few general things, The web site style is
    ideal, the articles is really excellent : D.
    Good job, cheers

  17. After I initially left a comment I seem to have clicked the -Notify me when new comments are added- checkbox
    and from now on whenever a comment is added I get four emails with the
    exact same comment. Perhaps there is a way you can remove me from that service?
    Kudos!

  18. Hi, i believe that i saw you visited my weblog thus i got here to go back the favor?.I’m trying to finmd
    things to enhance my website!I suppose its goodd enough to make use of a few
    of your concepts!!

  19. Just want to say your article is as astonishing. The clarity in your put up is just spectacular and that i can think you’re an expert on this subject.
    Fine with your permission let me to snatch your feed to keep updated with approaching post.
    Thanks one million and please keep up the enjoyable work.

  20. For latest news you have to go to see the web and on internet I found this web page as a finest web page
    for most up-to-date updates.

  21. Hi there are using WordPress for your blog platform?
    I’m new to the blog world but I’m trying to get started and
    set up my own. Do you require any html coding knowledge to make your own blog?
    Any help would be really appreciated!

  22. Thanks for any other magnificent post. Where else may anybody get that kind of information in such an ideal manner of writing?

    I have a presentation subsequent week, and I am at
    the look for such information.

  23. Good article. I’m experiencing a few of these issues as well..

  24. This is very attention-grabbing, You are an overly professional
    blogger. I’ve joined your rss feed and stay up for looking for extra of your wonderful post.
    Additionally, I have shared your site in my social networks

  25. Hi there i am kavin, its my first time to commenting anywhere, when i read this paragraph i thought i could also create
    comment due to this sensible article.

  26. Do you mind if I quote a few of your posts as long as I provide credit and
    sources back to your site? My blog site is in the exact same area of interest as yours and my visitors would certainly benefit from some of the information you provide
    here. Please let me know if this alright with you. Appreciate it!

  27. Hi, everything is going perfectly here and ofcourse every one is
    sharing information, that’s in fact fine, keep up writing.

  28. If some one needs to be updated with newest technologies
    afterward he mujst be visit this web page and be uup to date daily.

  29. You shouldn’t buy a game if you are not sure whether you are
    going to like it. Take the time to think carefully
    before choosing which gaming system you will buy. You advance
    through these in order, and the overall storyline unfolds as you go.

  30. http://www.happynewyear2015sms.net/

  31. Try to find the most level section of your yard and then figure
    out how large the rink will be. According to the Bleacher
    Report on Wednesday, it might be the home country, Russia, who gets the advantage as the games are
    in Sochi and that might make it tough for USA to pull
    off the gold. The timber block has been replaced with a vulcanized
    rubber puck and sticks with flags have been distorted with right hockey
    nets.

Leave a comment