This demo shows how to do resizing and overlays using the PHP GD functions. To learn how it works, have a look at the source code .
<?php
/*
* PHP+GD image scaling and overlay demo.
* Copyright 2003 - 2009, B. Johannessen <bob@db.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version, and provided that the above
* copyright and permission notice is included with all distributed
* copies of this or derived software.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* A copy of the GNU General Public License is available from the GNU
* website at the following URL: http://www.gnu.org/licenses/gpl.txt
*/
/*
* configuration: sets the full path of the overlay image,
* the rgb value to make transparant in the overlay image,
* the path to store the scaled images and the uri prefix
* for the scaled images.
*/
$overlay = '/home/dborg/www/demo/2003/02/14/scale-and-overlay/overlay.png';
$trans_r = 255;
$trans_g = 255;
$trans_b = 255;
$cache_fs = '/home/dborg/www/demo/2003/02/14/scale-and-overlay/cache/';
$cache_uri = 'http://db.org/demo/2003/02/14/scale-and-overlay/cache/';
/*
* calculate the filesystem and uri prefixes based on a semi-random string.
*/
$srid = md5($_SERVER['REMOTE_ADDR'] . $_SERVER['REMOTE_PORT'] . time());
$base_fs = $cache_fs . $srid;
$base_uri = $cache_uri . $srid;
if($_REQUEST['view'] == 'source') {
$source = str_replace(' ', ' ', htmlspecialchars(implode('', file('index.php'))));
$source = highlight_string(implode('', file('index.php')), true);
$show = 'source';
}
else if(!$overlay = imagecreatefrompng($overlay)) {
$error = 'error opening overlay image';
$show = 'error';
}
else if(isset($_FILES['file'])) {
/*
* open original (uploaded) image, based on type.
*/
switch($_FILES['file']['type']) {
case 'image/jpeg':
case 'image/pjpeg':
$orig = imagecreatefromjpeg($_FILES['file']['tmp_name']);
break;
case 'image/png':
$orig = imagecreatefrompng($_FILES['file']['tmp_name']);
break;
case 'image/gif':
$orig = imagecreatefromgif($_FILES['file']['tmp_name']);
break;
default:
$error = 'Unknown File Format or MIME Type';
$show = 'error';
}
if($orig) {
/*
* fetch the size of the original and overlay images,
* and calculate the size of the new image and thumb.
*/
$orig_x = imagesx($orig);
$orig_y = imagesy($orig);
$overlay_x = imagesx($overlay);
$overlay_y = imagesy($overlay);
$image_x = $_REQUEST['image_x'];
$thumb_x = $_REQUEST['thumb_x'];
$image_y = round(($orig_y * $image_x) / $orig_x);
$thumb_y = round(($orig_y * $thumb_x) / $orig_x);
/*
* calculate the offset of the upper left corner of the overlay
* based on the selected location.
*/
switch($_REQUEST['overlay']) {
case 'br':
$offset_x = $image_x - $overlay_x;
$offset_y = $image_y - $overlay_y;
break;
case 'bl':
$offset_x = 0;
$offset_y = $image_y - $overlay_y;
break;
case 'tr':
$offset_x = $image_x - $overlay_x;
$offset_y = 0;
break;
default:
$offset_x = 0;
$offset_y = 0;
}
/*
* create the new image, and scale the original into it.
*/
$image = imagecreatetruecolor($image_x, $image_y);
imagecopyresampled($image, $orig, 0, 0, 0, 0, $image_x, $image_y, $orig_x, $orig_y);
/*
* set the transparant color in the overlay, and copy
* it into the new image.
*/
imagecolortransparent($overlay, imagecolorallocate($overlay, $trans_r, $trans_g, $trans_b));
imagecopymerge($image, $overlay, $offset_x, $offset_y, 0, 0, $overlay_x, $overlay_y, 99);
/*
* create the thumb image, and scale the original into it.
*/
$thumb = imagecreatetruecolor($thumb_x, $thumb_y);
imagecopyresampled($thumb, $orig, 0, 0, 0, 0, $thumb_x, $thumb_y, $orig_x, $orig_y);
/*
* write the 3 images to disk.
*/
imagepng($orig, $base_fs . '-orig.png');
imagepng($image, $base_fs . '-image.png');
imagepng($thumb, $base_fs . '-thumb.png');
/*
* calculate the uri of the 3 images.
*/
$orig_uri = $base_uri . '-orig.png';
$image_uri = $base_uri . '-image.png';
$thumb_uri = $base_uri . '-thumb.png';
}
else {
if(!$error)
$error = 'Error reading uploaded image';
$show = 'error';
}
if(!isset($show))
$show = 'result';
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>PHP+GD Scale and Overlay Demo</title>
<link rel="stylesheet" href="/demo/screen.css" media="screen">
</head>
<body>
<?php include '/home/dborg/www/demo/adsense.php'; ?>
<h1>PHP+GD Scale and Overlay Demo</h1>
<p>
This demo shows how to do resizing and overlays using the
<acronym title="PHP Hypertext Preprocessor">PHP</acronym>
<abbr title="GD Graphics Library">GD</abbr> functions.
To learn how it works, have a look at
<a href="http://db.org/demo/2003/02/14/scale-and-overlay/?view=source" title="Source code for the PHP scale and overlay demo">
the source code
</a>.
</p>
<?php if(!$show) { ?>
<h2>Help</h2>
<p>
<b>Overlay</b>: The desired placement of the overlay image.
</p>
<p>
<b>Width</b>: The desired width of the scaled image.
</p>
<p>
<b>Thumb</b>: The desired width of the thumbnail image.
</p>
<p>
<b>Image File</b>: File to scale and overlay.
</p>
<?php } ?>
<?php if($show == 'error') { ?>
<h2><?=$error?></h2>
<?php } else if($show == 'source') { ?>
<h2>Source</h2>
<pre class="php-source"><?=$source?></pre>
<?php } else if($show == 'result') { ?>
<h2>Original Image</h2>
<p><img src="<?=$orig_uri?>"/></p>
<h2>Scaled Image</h2>
<p><img src="<?=$image_uri?>"/></p>
<h2>Thumb Image</h2>
<p><img src="<?=$thumb_uri?>"/></p>
<?php } else { ?>
<h2>Demo</h2>
<form enctype="multipart/form-data" action="http://db.org/demo/2003/02/14/scale-and-overlay/" method="post">
<fieldset>
<input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
<table>
<tr>
<td>Overlay:</td>
<td>
<select name="overlay">
<option value="tl">Top, Left</option>
<option value="tr">Top, Right</option>
<option value="bl">Bottom, Left</option>
<option value="br">Bottom, Right</option>
</select>
</td>
</tr>
<tr>
<td>Width:</td>
<td>
<select name="image_x">
<option value="400">400 px</option>
<option value="300">300 px</option>
<option value="200">200 px</option>
</select>
</td>
</tr>
<tr>
<td>Thumb:</td>
<td>
<select name="thumb_x">
<option value="100">100 px</option>
<option value="75">75 px</option>
<option value="50">50 px</option>
</select>
</td>
</tr>
<tr>
<td>Image File:</td>
<td><input name="file" type="file" /></td>
</tr>
<tr>
<td><input type="submit" value="Scale & Overlay" /></td>
<td></td>
</tr>
</table>
</fieldset>
</form>
<?php } ?>
<p><a href="/2003/02/14/scale-and-overlay/">Back</a></p>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/s
cript%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10953578-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>