
Hey Technorati, file this one under “stupid web tricks.” You know those annoyingly adorable cat pictures with retarded phrases built into the image? As it turns out, the technology behind lolcat images is as mindnumbingly simple as the people who post them. At the same time, the code that makes lolcats possible also has some far more useful (if not more interesting) applications.
If you are one of the few people on the planet lucky enough to have no idea what I’m talking about, take a look at icanhascheezeburger. Ok, put down the gun…breathe, in…breathe out.
These images are actually stored, text and all, on a server and yet, at the same time, those charming catspeak phrases are somehow dynamic. How is this magical gift to the world possible? And could I use the same code to improve the security on my website?
The code behind lolcats and captcha images:
// Set the content-type
header('Content-type: image/png');
// Set up the image and fonts:
$im = ImageCreateFromPng("jack.png"); //Load the base image.
$font = 'typewriter.ttf'; //Load the font.
$fontSize = 40; //Define the font size, in pixels.
$fontColor = imagecolorallocate($im, 255, 255, 255); //Define a color using the RGB standard.
$fontAngle = 0; //Specify the angle of the font. For no angle, use 0.
$textPositionLeft = 20; //Define the left margin of the text.
$textPositionTop = 50; //Define the top margin of the text.
// Type your text:
$text = 'Say cheese?
How about you
hold the cheese?
Hold it between
your knees.';
// Assemble the image:
imagettftext($im, $fontSize, $fontAngle, $textPositionLeft, $textPositionTop, $fontColor, $font, $text);
// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
imagedestroy($im);
Ok, so now the above image looks something like this. Not only have you just wasted an hour of your time, you’ve also made a negative contribution to the world. Congratulations! But wait…
This is also the code behind captchas:
Captchas are those screwy letters you have to decipher whenever you sign up for a website for the first time. Just as your grandpa can’t read these screwy letters, computers also have a bit of trouble with them, so they help websites filter out robot traffic and other undesirables (sorry grandpa, no kitteh porn for you!).
To deploy a captcha on your website, you only need to add two things to the above code:
- code that randomly generates letters and numbers
- a screwy font
Have fun out there!
Economic Analysis
Economic Calendar
Real Clear Markets
Undervalued stocks
Value Cruncher
Wikinvest
2 Comments
Thanks for the captcha lesson, but lolcats can be created much more easier. I use a free tool Bytescout Watermarking Lite to create them. Nevertheless, the post is very helpful!
Agreed…there are many easy ways to do this, and Bytescout is a good tool. The method I describe is probably only useful for a custom automated solution using php. And, I confess, I am a lolcat fan.