theoddsock.comhome of the internaut

As part of the work I’ve been doing on CraftNation I’ve been looking into image cropping and resizing. I’m sorry to say that due to a lack of affordable photo manipulation software¹ we often get images which have come straight out of digital camera, and are huge, about 3meg each. And with the facility to upload 4 images per deal, this can ( and has ) maxed out PHP’s maximum upload size which is 8meg. In addition images from the camera are not square, which is a bit of a pain when you are displaying square images on your site, and also in specific dimensions. The typical aspect ratio for your images shot on a digital camera are 4:3 or 1.33 the same aspect ratio of the pre-widescreen televisions.

This means that the image is 1.33 times wider than it is high. And if you’ve been cropping out the corner of the airing horse which is just in shot then the aspect ratio could be anything.

Here we have a pale pink rectangle which is in the 4:3 ratio and centred over it is a darker square image.

Now simply resizing a wide (or tall) image to be square will result in the image being squashed, or stretched in one direction.

For the last while we’ve been troubled with how to make it easier for CraftNation users to deal with their images. We’ve toyed with a cropping feature on the upload form but to be honest this isn’t practical, they are on the site to upload their deals not do image manipulation.

So instead I’ve been working on some functionality that will² go on behind the scenes after the images have been uploaded.

The first stage involves resizing the image so that the shortest side is the same length as that of our largest square image (in this case 350px) – this is because we want to resize as well as crop – so we make sure that we retain as much of the image as possible.

The second stage then crops the resized image so that it is a square, the code I’ve written crops from centre. If you think of your image as the pink one above, the code creates a square image which contains whatever is in the grey block above.

I used imagecopyresampled() to make sure that the image quality is kept as good as possible.

[1] There are a number of good web based photo manipulation sites such as Picnik which are a decent alternative to Adobe Photoshop and allow you to resize, crop and play around with the white balance and exposure.

[2] This feature has not yet been implemented on the site.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

// initialise to settings for a square image
$new_w = $e;
$new_h = $e;
$x_offset = 0;
$y_offset = 0;
// wide image
if($h < $w){
  $new_w = ($w * $e)/$h;
  $x_offset = ($new_w/2) - ($e/2);
}
// tall image
else if($w < $h){
  $new_h = ($h * $e)/$w;
  $y_offset = ($new_h/2) - ($e/2);
}
 
$orig_image = '';
switch($imageType) {
  case "image/gif":
    $orig_image=imagecreatefromgif($img);
    break;
 
  case "image/pjpeg":
  case "image/jpeg":
  case "image/jpg":
    $orig_image=imagecreatefromjpeg($img);
    break;
 
  case "image/png":
  case "image/x-png":
    $orig_image=imagecreatefrompng($img);
    break;
}
 
// images
$resized_img = imagecreatetruecolor($new_w, $new_h);
$cropped_img = imagecreatetruecolor($e, $e);
 
imagecopyresampled($resized_img, $orig_image, 0, 0, 0, 0, $new_w, $new_h, $w, $h);
imagecopyresampled($cropped_img, $resized_img, 0, 0, $x_offset, $y_offset, $e, $e, $e, $e);
 
//output the image to the browser
header('Content-type: image/jpeg');
imagejpeg($cropped_img, null, 100);
?>

Test image – set to 350px wide, note the height is less than 350

Image forced to be square

When we set the width to 350px above the height was less than 350px. By forcing the image to be 350px square  the height has been pulled to make it 350 as well, resulting in a horizontal squash and vertical stretch and a very unimpressed Amelia.

This is how it should look not squashed nor stretched but a nice centred crop.