Over a million developers have joined DZone.

Creating Proportional Image Thumbnails in Real-time

DZone's Guide to

Creating Proportional Image Thumbnails in Real-time

· Web Dev Zone
Free Resource

Prove impact and reduce risk when rolling out new features. Optimizely Full Stack helps you experiment in any application.

What a lot of people don’t know is that you can put a PHP script in the "source" of a html image element, like this:
<img src="script_php.php" border="0" alt="Sample" />

So, we have situations where we need to create a personalized image in real-time, only for a unique intention, without generating another image.

For example:

You have a image gallery with 20 images, and you need create the thumbs to be shown in a place of the page for the users to click and open a popup or thickbox/lightbox with the original image.

To do this, we usually create a thumb when the administrator of the site uploads the image, but here we have a solution to create it in real-time, where it won't be necessary to create a thumb when the upload is done.

First Step:

Create a php script with the name “redim_img.php". In this file, we do the normal process to resize an image.

$imagem   = urldecode($_GET['imagem']);
$tamanhoW = $_GET['largura'];
$tamanhoH = $_GET['altura'];
$forcar = strtoupper($_GET['forcar']);

if (file_exists($imagem)) {
list($width, $height, $type, $attr) = getimagesize($imagem);
if ($type == 1) {
$im = imagecreatefromgif($imagem);
//criar uma amostra da imagem original GIF
} elseif ($type == 2) {
$im = imagecreatefromjpeg($imagem);
//criar uma amostra da imagem original JPEG
} elseif ($type == 3) {
$im = imagecreatefrompng($imagem);
//criar uma amostra da imagem original PNG
if ($forcar == 'X') {
$largurao = $width;
$alturao = $height;
$largurad = $tamanhoW;
$alturad = ($alturao * $largurad) / $largurao;
} elseif ($forcar == 'Y') {
$largurao = $width;
$alturao = $height;
$alturad = $tamanhoH;
$largurad = ($largurao * $alturad) / $alturao;
} elseif ($forcar == 'XY' or $forcar == 'YX') {
$largurao = $width;
$alturao = $height;
$alturad = $tamanhoH;
$largurad = $tamanhoW;
} else {
$largurao = $width;
// pegar a largura da amostra
$alturao = $height;
// pegar a altura da amostra

if ($largurao >= $alturao){
$largurad = $tamanhoW;
// definir a largura da miniatura em px
$alturad = (($alturao * $largurad)/ $largurao);
// calcula a largura da imagem a partir da largura da miniatura
} else {
$alturad = $tamanhoH;
// definir a altura da miniatura em px
$largurad = (($largurao * $alturad) / $alturao);
// calcula a largura da imagem a partir da altura da miniatura

if ($type == 1) {
$nova = imagecreate($largurad, $alturad);
//criar uma imagem em branco
} else {
$nova = imagecreatetruecolor($largurad, $alturad);
//criar uma imagem em branco

imagecopyresampled($nova,$im,0,0,0,0, $largurad, $alturad, $largurao, $alturao);
//copiar sobre a imagem em branco a amostra diminuindo conforma as especificacoes da miniatura

if ($type == 1) {
//cria imagem gif
} elseif ($type == 2) {
imagejpeg($nova, '', 99);
//cria imagem jpeg
} elseif ($type == 3) {
//cria imagem png

//libera a memoria usada na miniatura
//libera a memoria usada na amostra
// Fim da geracao de miniaturas
} else {
echo('Arquivo não encontrado.');

Second Step:

Take some images from your computer and put them in the same path as your test script.

Third Step:

Create an index script that will have the content to be shown to the users. Anything like this:

My photos:
<img src="redim_img.php?imagem=photo1.jpg&largura=100&altura=100" border="0" alt="Photo1" />
<img src="redim_img.php?imagem=photo2.jpg&largura=100&altura=100" border="0" alt="Photo2" />
<img src="redim_img.php?imagem=photo3.jpg&largura=100&altura=100" border="0" alt="Photo3" />

So the final structure of our sample will be like this:

    + htdocs
|-- sample
|-- index.php
|-- redim_img.php
|-- photo1.jpg
|-- photo2.jpg
|-- photo3.jpg

To understand it, we need look only to the source of the images, we are calling a php script "redim_img.php", passing 3 parameters:

> largura(width)
> altura(height)
> imagem(image path).

When the php script "redim_img.php" receives the parameters, it will verify if the image exists; after that it will verify the original width and height and will calculate a new proportional width/height and finally it will create a new image based in this new size and throw the content into the html image element.

This is only a basic mode, but you can do many more things, like put watermarks and more.

With SDKs for all major client and server side platforms, you can experiment on any platform with Optimizely Full Stack.


Published at DZone with permission of Paulo Coutinho. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}