There are a lot of ways an image could be manipulated on the server side as well as on the client side aka in browser inside a web application. As one of the ways for this purpose: PHP GD is an easy and simple way to do some image creation and manipulation on the server side in a web application session.
If you are using a linux box, assuming you already got PHP going, it is very easy to install and run php-gd on your fedora environment: "yum install php-gd" and then restart your apache using "service httpd restart". For all other environments it is most likely as easy as to install the php in your development environment.
Now the fun part... My tutorial focuses on how you can create an image and show it to the user on the fly - perhaps this is the most useful type of tutorial. This simple idea being:
- Developer enters an image url in an "img" tag, such as <img src="myimage.php" /> or enters the URL directly: http://www.example.com/myimage.php inside the browser navigation
- "myimage.php" writes out an image file and gets displayed inside the browser
The successful completion of above requires 3 important steps:
- Set and send the right HTTP (Mime) Headers
- Create or edit the image file
- Send the image content to the user as part of HTTP response body
As we know HTTP response has two components: header and body. Response header has information such as content-type, cookies, content-length, whether to cache it or not, etc. Technically RFC 4229 has the full list of legit headers, but the wikipedia has a list of most common ones: http://en.wikipedia.org/wiki/List_of_HTTP_headers . Developer typically manipulates the header by using the header() helper function in PHP. Response body is what you typically send to user by echo(), print(), etc statements and include your html, css, javascript, images, etc. Let's demonstrate that with an example by looking at http://www.google.com HTTP response sent to your browser - including header and body:
HTTP response header from http://www.google.com:
HTTP/1.0 200 OK
Date: Thu, 15 Jul 2010 05:21:24 GMT
Expires: -1
Cache-Control: private, max-age=0
Content-Type: text/html; charset=ISO-8859-1
Set-Cookie: PREF=ID=fb89c7e025ffcfc6:TM=1279171284:LM=1279171284:S=1vQYxcz_4yFaj0LG; expires=Sat, 14-Jul-2012 05:21:24 GMT; path=/; domain=.google.com
Set-Cookie: NID=36=AVdcKJ8_hg-JnSx3bKaQo8rEQy4R0YRiUKOO5eL224BPNENNmKpU48Lp1S0mK5rqXOpdRDDfETzLJfWZOb3yjplTJ8HaBfYN24P7ml3JWe2_QyWD24A5l8GRKcb5kI2i; expires=Fri, 14-Jan-2011 05:21:24 GMT; path=/; domain=.google.com; HttpOnly
Server: gws
X-XSS-Protection: 1; mode=block
First few characters of the HTTP response body from http://www.google.com:
<!doctype html><html><head><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><title>Google</title><script>window.google={kEI:"1Jo-TKyRMYjoowT8uNXFCA",kEXPI:"25233,25439,25511,25529",kCSI:{e:"25233,25439,25511,25529",ei:"1Jo-TKyRMYjoowT8uNXFCA",expi:"25233,25439,25511,25529"},ml:function(){},kHL:"en",time:function(){return(new Date).getTime()},log:function(b,d,c){var a=new Image,e=google,g=e.lc,f=e.li;a.onerror=(a.onload=(a.onabort=function(){delete g[f]}));g[f]=a;c=c||"/gen_204?atyp=i&ct="+b+"&cad="+d+"&zx="+google.time();a.src=c;e.li=f+1},lc:[],li:0,Toolbelt:{}};window.google.sn="webhp";window.google.timers={load:{t:{start:(new Date).getTime()}}};try{}catch(u){}window.google.jsrt_kill=1;
...
As you can see the HTTP response header for google.com immediately sets two cookies at the first visit of any user with "Set-Cookie" header. The HTTP response body has the usual suspects, html data including html tag: <title>, etc. and javascript code is immediately at the forefront.
Now showing an image as part of an HTTP response, we need to set the appropriate http header, such as for a JPG output:
header('Content-type: image/jpeg');
Then get and print the image to the user in our HTTP response body:
$image = imagecreatefromjpeg('pictures/test01.jpg');Now when we put the above code all together to finalize the content of our myimage.php file - it is very simple:
imagejpeg($image);
<?php
header('Content-type: image/jpeg');
$image = imagecreatefromjpeg('pictures/test01.jpg');
imagejpeg($image);
?>
We are done assuming you put a file called "test01.jpg" in a directory called "pictures" in the same directory as your php file! I mean we are done reading a jpeg file and displaying it to the user - which by the way is already done by apache billions times a day. We have do a little more than that now to actually show that we actually use php-gd to do something.
Example 1: First real example: let's resize that picture using php-gd:
<?php
$image = imagecreatefromjpeg('pictures/test01.jpg');
// Calculate the original width and height
$original_width = imagesx($image);
$original_height = imagesy($image);
// Calculate the new width and height divided by 2.
// Note that image width and height has to be integer number, not fractional
$new_width = intval($original_width/2);
$new_height = intval($original_height/2);
// Create the new image with half-size and copy the original image into it while resampling it
$image_new = imagecreatetruecolor($new_width, $new_height);
imagecopyresampled($image_new, $image, 0, 0, 0, 0, $new_width, $new_height, $original_width, $original_height);
header('Content-type: image/jpeg');
imagejpeg($image_new);
All right, now we have a program that resizes a picture on the fly and shows it to the user. Now more serious examples...
Example 2: Let's make a color image gray-scale on the fly and show it to the user. We will apply a filter to the image and then present it to the user.
<?php
$image = imagecreatefromjpeg('pictures/test01.jpg');
imagefilter($image, IMG_FILTER_GRAYSCALE);
header('Content-type: image/jpeg');
imagejpeg($image);
?>
Example 3: Let's add a red-line: 2 pixels in width and crossing the image in the center all the way from left to right.
To be continued...
Recent Comments