PHP Tutorial: Creating A MemeGenerator / Cheezburger Clone - Part 1
|May 8, 2012||Posted by Greg Bulmash under PHP|
Meme Generator has become an integral part of the Facebook experience, it seems. It's hard to go a day without seeing one of its photos with custom captions. It's basically the latest iteration of the same technology that powers the Cheezburger family of sites... A tool that lets users write on pictures.
I've had a tool like this online for over 5 years now. It's a Flash-based drawing application at FunDraw.com that lets you draw, add text and clipart to your drawing, and upload your photo as a background. One of the collections of clipart I have there is funny hats, beards, and googly eyes to put on pictures of your friends. But it's a big multi-purpose tool that is too overly complicated for a task like this.
TIP 1: A PHP SCRIPT WITH A .JPG EXTENSION
The most used part of the site will be the image generator. It will take arguments for the photo ID, the text to write on it, the text colors, the font face, and the template to use. It will then generate a photo and return it in a way that can be embedded in the image previewer form.
To get started we need to do three things.
Step The First
We need graphic manipulation tools that can be used in a PHP script. Most servers have the GD library installed with PHP, but it's old, clunky, and slow. If you get any real usage of this, it will bog down quickly. So we're going to use ImageMagick and its PHP extension.
Make sure ImageMagick is installed on your server and that you've installed the ImageMagick extension for PHP. I could write a book on all the ways this could possibly go down. So I'll just note how it happened on my dev and production systems. If you already have it installed, you can skip my explanation.
On my Linux server, I already had ImageMagick installed for FunDraw, but I had to issue
pecl install imagick to install the Image Magick extension (FunDraw uses PerlMagick). I then had to edit my php.ini file to enable it (
extension=imagick.so). I restarted Apache and it was happily chugging along.
My current dev environment (a laptop I got 6 months ago) didn't have ImageMagick installed yet. This is where it gets tricky. The whole VC6/VC9/VC10 thing and 32 vs 64 bit versions can get rather funky. Though I'm running a 64-bit version of Win7, trying to mix 64-bit and 32-bit versions of different server components gets wonky and not all components are available in 64-bit flavors.
Basically, my dev server components were VC9/32-bit Apache 2.2.21 and threadsafe VC9/32-bit PHP 5.3.8. The Windows builds of the ImageMagick PHP library were VC9 as well. That meant I needed a 32-bit/VC9 version of ImageMagick and recent versions are VC10. I got a copy of 6.6.2-10 here and a copy of the PHP library here. I installed ImageMagick, then put the
php_imagick_ts.dll file in my PHP extensions folder, added a line to my php.ini to reference it, and restarted Apache.
BTW, that's the condensed version. I messed up a few times before I figured out those steps.
We need to create a text file called preview.jpg and put this code in it.
<?php header("Content-type: image/jpeg"); $img = new imagick('pbzoosm.jpg'); echo $img; exit; ?>
This simply sends a header that tells the browser it's about to deliver a JPEG. It then uses PHPs Imagick extension to load an image (
$img = new imagick('pbzoosm.jpg');) and echo it out (
The image "pbzoosm.jpg" was obtained from Wikimedia Commons. It's author is ltshears, and it is licensed under a Creative Commons 3.0 Share Alike license.
Step The Third
Now, before that script will work, we have to add an entry to our .htaccess file that lets the web server know the file
preview.jpg should be treated as a PHP script and executed, otherwise the web server will deliver the text in the file to the browser and it will assume it's a malformed image.
If you don't have a .htaccess file, create one in the directory where you're housing
preview.jpg. Then add this to your .htaccess file.
<Files preview.jpg> SetHandler application/x-httpd-php </Files>
Depending on your server configuration, you may have to set the handler as
application/x-httpd-php5. Those are the most common, but there are others. If one of the two doesn't work for you, you may need to ask your server admin what handler you need to set.
Once you have the
preview.jpg file in place, an image for it to load in place, and your .htaccess file edited, you should be able to reference
preview.jpg just like any other image. The cool part is that you'll be able to pass it parameters, just like any other PHP script.
The photo above is a demo of the script in action. Tomorrow, I'll discuss passing it parameters and show you how to add some basic text.