Náhľady k obrázkom generované v PHP

Ukážeme si, ako pomocou PHP jednoducho meniť veľkosť obrázku. Môže sa nám to zísť pri tvorbe internetového obchodu, obrázkových galérií a podobne.

Príklad pozostáva z dvoch súborov. Jeden súbor, nazvaný showimage.php, je PHP skript, ktorý vykonáva celú prácu transformácie veľkosti obrázku, a druhý súbor, nazvaný priklad.html, je jednoduchá HTML stránka, na ktorej sa budú obrázky zobrazovať. Kompletné zdrojové súbory sú vám k dispozícii.

showimage.php

Najprv si v krátkosti vysvetlíme prácu skriptu. Pomocou metódy GET odovzdávame skriptu meno súboru s obrázkom $_GET["filename"], maximálnu dovolenú šírku $_GET["width"] a výšku $_GET["height"] novovytvoreného obrázku. Ak niektorá z hodnôt je zle zadaná, skript nám vykreslí obrázok s popisom chyby. Na to nám slúži vlastná funkcia ErrorImage(string message). Ak je všetko korektne zadané, zistíme formát, šírku a výšku pôvodného obrázku, vyrátame nové rozmery na základe predaných parametrov a pomocou funkcií GD knižnice vytvoríme nový obrázok.

<?php
/* funkcia na vykreslenie error obrázku
parameter – retazec, ktorý sa má vypísat ako ERROR */
function ErrorImage($string)
{
  header („Content-type: image/png“);
  $im = imagecreate (300, 50);
  $background_color = imagecolorallocate ($im, 200, 200, 200);
  $text_color = imagecolorallocate ($im, 233, 14, 91);
  imagestring ($im, 5, 5, 5, „ERROR: „.$string, $text_color);
  imagepng ($im);
  exit();
}
/* ak subor existuje – získanie informácií o obrázku
$size[0] – šírka
$size[1] – výška
$size[2] – formát */
if(file_exists($_GET[„filename“]))
  $size=getimagesize($_GET[„filename“]);
/* ak subor neexistuje – zobrazenie error oébrazku */
else
  ErrorImage(„Súbor neexistuje“);
/* ak zadaná šírka je menšia ako 1px, alebo nie je císlo, tak sa vykreslí error obrázok
to isté platí aj pre výsku */
if($_GET[„width“]<1)
  ErrorImage(„Nekorektna sirka nahladu“);
if($_GET[„height“]<1)
  ErrorImage(„Nekorektna vyska nahladu“);
/* pridelenie hlavicky */
switch($size[2])
{
  case 1:
    $type=“gif“;
    header(„Content-type: image/png“);
    break;
  case 2:
    $type=“jpeg“;
    header(„Content-type: image/jpeg“);
    break;
  case 3:
    $type=“png“;
    header(„Content-type: image/png“);
    break;
/* ak je to iný formát obrázku alebo to nie je obrázok, vykreslenie error obrázku */
  default:
    ErrorImage(„Nekorektny typ suboru“);
}
/* výpocet novej šírky a výšky */
$scale_width=$_GET[„width“]/$size[0];
$scale_height=$_GET[„height“]/$size[1];
$scale=($scale_width <= $scale_height ? $scale_width : $scale_height);
$new_width=ceil($scale*$size[0]);
$new_height=ceil($scale*$size[1]);
/* vytvorenie cielového a zdrojového obrázku */
  $im = imagecreatetruecolor($new_width,$new_height);
switch($type)
{
  case „gif“:
    $res_im=imagecreatefromgif($_GET[„filename“]);
    break;
  case „jpeg“:
    $res_im=imagecreatefromjpeg($_GET[„filename“]);
    break;
  case „png“:
    $res_im=imagecreatefrompng($_GET[„filename“]);
    break;
}
/* kopírovanie oblasti do cielového obázku */
imagecopyresampled($im, $res_im, 0, 0, 0, 0, $new_width+1, $new_height+1, $size[0], $size[1]);
/* zrušenie zdrojového obrázku */
imagedestroy($res_im);
/* výstup náhladu do browsera */
switch($type)
{
  case „jpeg“:
    imagejpeg($im);
    break;
  case „gif“:
  case „png“:
    imagepng($im);
    break;
}
?>

Všimnite si v zdrojovom kóde, ako pracujeme s formátom GIF. Obrázok, ktorý vraciame ako náhľad, nie je vo formáte GIF, ale vo formáte PNG. Je to preto, lebo funkcia imagecopyresampled nemusí pracovať správne pri vyrátavaní obrázku funkciou imagecreate. To obídeme, ak použijeme funkciu imagecreatetruecolor. Ale pozor, táto funkcia pre zmenu nevie pracovať s GIF formátom. Takže som zvolil asi najprijateľnejší formát, a to PNG.

Vysvetlenie troch funkcií, ostatné by mali byť každému jasné. Ak nie sú, odporúčam prečítať si články o tvorbe obrázkov.

resource imagecreatetruecolor(int x_size, int y_size)

Vracia identifikátor nonovytvoreného true color obrázku. Táto funkcia nemôže pracovať s formátom GIF. Funkcia vyžaduje verziu GD 2.0.1 alebo vyššiu.

array getimagesize(string filename [, array imageinfo])

Vracia pole so štvormi prvkami. Prvok s indexom 0 obsahuje šírku obrázku, index 1 obsahuje výšku, index 2 obsahuje príznak formátu. (Nám stačí zatiaľ vedieť, že príznak s hodnotou 1 je GIF, 2 je JPEG a 3 je PNG.) Index 3 je textový reťazec height="yyy" width="xxx", ktorý môže byť použitý v img elementu.

int imagecopyresampled(resource dst_im, resource src_im, int dstX, int dstY, int srcX, int srcY, int dstW, int dstH, int srcW, int srcH)

Kopíruje časť obrázku src_im danou súradnicami srcX a srcY o výške a šírke srcW a srcH do obrázku dst_im na počiatočné súradnice dstX a dstY o výške a šírke dstW a dstH. Pri používaní tejto funkcie sa doporučuje vytvárať obrázky funkciou imagecreatetruecolor().

Zobrazenie obrázkov.

Na zobrazenie zmenšeného obrázku nám stačí volať v elementu img náš skript a predať mu požadované parametre v URL.

<!doctype html public „-//W3C//DTD HTML 4.0 //EN“>
<html>
<head>
   <title>Nahlady</title>
</head>
<body>
<img src=“obrazok.gif“ />
<br />Originál gif<br /><br />
<img src=“showimage.php?filename=obrazok.gif&width=250&height=250″ />
<br />Náhlad z obrazku gif vo formate png<br /><br />
<hr />
<img src=“obrazok.jpg“ />
<br />Originál jpeg<br /><br />
<img src=“showimage.php?filename=obrazok.jpg&width=250&height=250″ />
<br />Náhlad jpeg<br /><br />
<hr />
<img src=“obrazok.png“ />
<br />Originál png<br /><br />
<img src=“showimage.php?filename=obrazok.png&width=250.9&height=250″ />
<br />Náhlad png
</body>
</html>

Tento skript obsahuje podporu iba troch formátov. Pridanie podpory ďalších formátov je jednoduché, avšak myslím si, že pre web nie veľmi podstatné. Veď určite nebudete robiť obrázkovú galériu v TIF formáte, nie?

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.