Category Archives: Code Snippets - Page 2

Square Images

Flickr.com when uploading an image, it provides a small thumbnail, but it does in a square image, this is of course almost impossible for any “normal” image, because most images are rectangular, and trying to make it square will give you an awful image as result.

But Flickr images are very good, so I did it in php the similar process, and I will explain below.

We will use this example image:
Square Images - Image Example

To create a square, we need to calculate the maximum square that fit on the image, this is the minimum size between height and width.
Square Images - Image Size

Next we create a square with that size, of course, we need to put in the center, because if not, the image could look very different to the original image.

Square Images - Square

This can be done easily with the following formula:

//if the square is adjusted to width
$remain = $height - $min_size;
$y = floor($remain / 2.0);
//if the square is adjusted to height like the example image
$remain = $width - $min_size;
$x = floor($remain / 2.0);

Square Images - Image Final

You can test on this site:
http://www.danguer.com/articles/images/square/

Or check the sources here (in txt):
http://www.danguer.com/articles/images/square/source

The code is in two files and another php file which uses the other two, the files are:

  • ImageHandler.php this class provides basic handling of images, like openning and saving
  • ImageSquare.php this class extends the basic ImageHandler and provides a convert function which makes the image into square
  • index.php display the form and when an image is uploaded, it create the new square image and display it directly.
Share

Useful functions

Checking the statistics of the blog, I noticed the user were searching for some information I’ve put time ago.

As all my information were a mess, I decide to delete all the old posts and start again (sorry for that).

I’ve noticed the people were looking for two similar things:

  1. Convert between image formats in PHP
  2. Desaturate an image (and other functions)

I will talk on this and create a new category: Code Snippets

Convert between image formats in PHP (converting png images into jpeg, gif)

First you need the php-gd extension installed, if you write:

You need to search something like this:
PHP GD Installation

With this, you will know you have php-gd2 (version 2 is surely better and the php5 version of php-gd2 seems to be better with new filters).
You also know with this, you can save on GIF, JPG, PNG, WBMP and XBM, and also you can handle Freetype Fonts (TTF)

To convert a file is really easy:

$image_png = "your_image.png";
$image_output = "your_output_image.jpg";
$image = imagecreatefrompng($image_png);
imagejpeg($image, $image_output);

So simple!, if you want to open a jpeg and save into gif, you need only this:

$image_jpeg = "your_image.jpg";
$image_output = "your_output_image.gif";
$image = imagecreatefromjpeg($image_jpeg );
imagegif($image, $image_output);

Easy, all the php-gd2 which handle with formats ends with the format type (jpeg, gif, png, wbmp, etc).

More information:
http://www.php.net/manual/en/ref.image.php

Desaturate Image

One of the most common changes to an image is to set as grayscale, to make this, you need to convert each possible (256^3 colors) into a 256 color (which is the grayscale).
In fact, if you put the same color into the three channels (RGB) you will have a grayscale image.

To make this, there are usual paths:

  1. Set the color to the average of the three colors: (R + G + B) / 3
  2. Convert through decimals to each color, for example: R*0.299 + G*0.587 + B*0.114, you need to assure the sum of the decimals make one, or you are going to have black “holes” (0.299 + 0.587 + 0.114 = 1.0)
  3. Desaturate, the RGB model is a computer-friendly model; but the classical model for colors is HSV which means: Hue, Saturation, Value.
    In this model, you have a cone, like the image of below, the hue is the “color” in fact (a 360 continous color), the Saturation means how much pigmented will be the color (0 means no pigment and 1.0 means full pigment) and the value is how much light the color will have (0 means black and 1 means white).
    So Desaturate in fact is eliminate the saturation value, since it represents the pigmentation, to achieve this you need to convert into HSV model, make 0 to Saturation value, and convert again into RGB model and save.

HSV Cone Model

The most used is option 2), since a good example is the Photoshop Mix Channels filter, you can make get your own values to mix the colors from Photoshop.

To achieve this in PHP, I’ve found a good way in PHP.net posted by moxleystratton.com:

function imagetograyscale($im)
{
if (imageistruecolor($im)) {
imagetruecolortopalette($im, false, 256);
}

for ($c = 0; $c < imagecolorstotal($im); $c++) {
$col = imagecolorsforindex($im, $c);
$gray = round(0.299 * $col['red'] + 0.587 * $col['green'] + 0.114 * $col['blue']);
imagecolorset($im, $c, $gray, $gray, $gray);
}
}

What this filter does is simple convert each color in the image for the new gray value, in a traditional way, you need to go to each pixel and convert to the new color.

In a later post I will tell you how to change to HSV model and how to perform really desaturation.

More Information:
HSV Model: http://en.wikipedia.org/wiki/HSV_color_space

Share