Welcome to WebmasterWorld Guest from

Forum Moderators: coopster & jatar k

Message Too Old, No Replies

Function to add background to images

3:44 pm on Jul 16, 2010 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 30, 2008
votes: 0

I'd like to process images before adding them to my website, but do something beyond simple resizing. What I had in mind is to take an image of, say, 240x320 then mod it to a resolution of 640x240 but make the new space white. Essentially adding the image to another blank image. Of course this can be done with Photoshop before uploading, but I'd like to get the website to do that.

Can anyone point me toward a function or tutorial that might help? Google has been weak on answers.
4:52 pm on July 16, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
votes: 0

GD toolkit or ImageMagick should handle this, but be careful . . .

240x320 then mod it to a resolution of 640x240

When you size up, interpolation will create ragged pixelated images. Visualize pixels as the vertical lines here:


now size it up


the programming has to calculate the pixel to "fill in" between the pipes, represented by the dots. Since there's nothing there, it can only take the values to the left and right and "fake it." So any up-sizing you do will look pretty horrible.

The exception would be sizing from vectored graphics or fractal images, neither of which are within the power of GD to do, ImagMagick may have vector support but don't think it supports fractal images (which is vectored art on steroids . . . )
10:04 pm on July 16, 2010 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 14, 2006
votes: 0

I use something very similar to what you want to do, though it is not the same but if you understand the mechanics I'm sure you'll figure out exactly what you want, this one takes a .gif/.jpg/.png and creates a jpeg:
$original_image = '/path/to/the/original/image/image.jpg';
$req_width = 640;
$req_height = 240;
$ext = '.jpg';

$img = NULL;
switch($ext) {
case '.jpg' :
case '.jpeg' :
$img = imagecreatefromjpeg($new);
case '.png' :
$img = imagecreatefrompng($new);
case '.gif' :
$img = imagecreatefromgif($new);

if ($img) { // Get image size and scale ratio
$width = imagesx($img);
$height = imagesy($img);
$scale = min(($req_width/$width),($req_height/$height), 1 );
$new_width = floor($scale*$width);
$new_height = floor($scale*$height);
$tmp_img = imagecreatetruecolor($req_width, $req_height); // Create a new temporary image
$white = imagecolorallocate($tmp_img, 255, 255, 255);
imagefill ($tmp_img, 0, 0, $white);
$posx = round(($req_width-$new_width)/2);
$posy = round(($req_height-$new_height)/2);
imagecopyresampled($tmp_img, $img, $posx, $posy, 0, 0, $new_width, $new_height, $width, $height); // Copy and resize old image into new image
ob_start(); // remove this line if you specify a filename in imagejpeg() next line
imagejpeg($tmp_img); /// to save it straight to disk change to imagejpeg($tmp_img, 'new_image_path/and_filename.jpg');
$imageData = ob_get_clean(); //// this is the final image, save it or display it, remove this line if you specified a file name in imagejpeg() previous line

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members