I am looking to add a background to images that users upload that are not square. So if they upload a tall and skinny photo I want to add a white background to the sides of the image to make the resulting image have an aspect ratio of 1:1. Is this possible using PHP or javascript?
-
I maintain that my original answer was an answer because the question was "Is this possible using php or javascript," but have you looked into the extensions found in: http://www.php.net/manual/en/refs.utilspec.image.php – Dan Oct 12 '11 at 23:29
-
Did you search SO? There are a lot of Q&A's on this subject. For example: [PHP Image Resizing](http://stackoverflow.com/questions/7553247/php-image-resizing). – Herbert Oct 12 '11 at 23:36
4 Answers
You can use the GD library for what, with a library called Wideimage it's a breeze:
$image = WideImage::load('img_form_field_name');
$size = max($image->getHeight(), $image->getWidth());
$white = $image->allocateColor(255, 255, 255);
$image->resizeCanvas($size, $size, 'center', 'center', $white);
See the documentation and examples, many functions can even be tested interactively.

- 193,403
- 52
- 435
- 836
Yep you'll want to look into either the GD library or ImageMagik. There are plenty of tutorials available for this task.
Functions like imagecreatetruecolor() etc will allow you to create a new image, and then stack the uploaded image on top of it and save it as a new file.

- 76,997
- 17
- 122
- 145
The GD library is the most commonly used image manipulation package. It's a set of functions often installed with PHP which handle image manipulation.
What you'll want to do is either scale and crop your image to a specific aspect ratio so that you place your image on a square canvas and cut off whatever does fit or
You'll want to simply resize your image to a fixed aspect ratio and place it on a square canvas with whitespace around it.
Either way, this tutorial should point you in the right direction
http://return-true.com/2009/02/making-cropping-thumbnails-square-using-php-gd/

- 25,669
- 10
- 69
- 108

- 584
- 5
- 9
-
1The question is more specific than simply "Is this possible", please read carefully. The way you chose to answer (just a link to docs with no other direction) just feels a bit rude and condescending. – Wesley Murch Oct 12 '11 at 23:36