Náhled obrázku v PHP (OOP)

Samozřejmostí každého redakčního systému nebo publikačního systému, který pracuje s obrázky, je vytvářet náhledy. Článek popisuje postup při vývoji takové třídy.

Každý web co zobrazuje na jedné stránce více obrázků, např. jako ilustrační foto u článků, nutně potřebuje vytvářet náhledy.

Pro ilustraci si představte výpis článků: 10 článků, 10 fotek, průměrně může mít jedna fotka v detailu 100kb nebo i mnohonásobně více. Když se budu snažit ve výpisu zobrazit náhled zápisem html kódu <img src="foto1.jpg" width="100px" height="150px" /> ke klientovi (do prohlížeče) bude stále stahován obrázek s plnou velikostí, takže v nejlepším případě si čtenář počká než se stáhne 1MB a poté se mu teprve náhledy zobrazí.

Protože jsem fanda objektového programování, popíšu postup, jak jsem psal třídu na vytváření náhledu obrázku. Nejprve jsem si specifikoval co taková třída má umět, co od ní chci a jak s ní chci pracovat. Třída pracuje s obrázky již nahranými na server, upload budeme muset zajisti před samotnou akcí.

Postup při psaní třídy na vytváření náhledů obrázků

Chci, aby třída vzala detail obrázku, zmenšila ho a uložila jako nový obrázek, přitom chci stanovit maximální výšku a šířku, popřípadě kvalitu obrázku.

Určím nejprve základní vlastnosti a metody, chci aby bylo možné thumbnail vytvořit a nebo zobrazit na obrazovku. K tomu budu potřebovat vypočítat jeho výslednou výšku a šířku getComputedSize() a zjistit jeho typ getMimeType().

1. <?
2. class Thumb {
3. public $source, $WMax, $HMax, $quality;
4. private $imagesize, $computedsize;
5. public function __construct($source, $WMax=1000, $HMax=1000, $quality=60) {
6. $this->source = $source;
7. $this->WMax = $WMax;
8. $this->HMax = $HMax;
9. $this->quality = $quality;
10. }
11. public function createThumb($destionation) { }
12. public function showThumb() { }
13. private function getMimeType() { }
14. private function getComputedSize() { }
15. }
16. ?>

V konstruktoru třídy přiřazuji základní vlastnosti pomocí $this. Defaultně jsem nastavil maximální výšku a šířku na 1000 a kvalitu na 60.

Začnu od lesa a to metodami showThumb a createThumb, k zobrazení nebo uložení obrázku používáme vestavěnou funkci php imagegif, imagejpeg nebo imagepng. Jako vstupní parametr je výsledek imagecreate, a v případě zadání druhého parametru bude výstupem soubor, při absenci tohoto parametru bude výstupem obrazovka. Při výpisu obrázku gif by vypadal kód funkce takhle:

1. header ("Content-type: image/gif");
2. imagegif($image);
3. imagedestroy($image);
4. exit;

Obdobně jsou řešené jpg a png, pro usnadnění práce použijeme vytváření uživatelských funkcí pomocí call_user_func_array.

Zvláštností funkcí imagejpeg a imagepng je možnost stanovení kvality výsledného obrázku. Ještě větší zvláštností je, že u imagepng to nefunguje vůbec. Další problém je, že se stanovují odlišně, imagejpeg přijímá hodnoty od 0 do 100 a chápe číslo jako výši kvality, tedy 100 je maximální kvalita, narozdíl imagepng, která stanovuje výši komprese, tedy přesně opačně od 0 do 9, 9 je maximální komprese a nejméně kvalitní obrázek. My chceme, aby naše třída vnímala kvalitu jako procentní stupeň, proto vytvoříme převodní funkci getComputedQuality(). Výhodou je že funkci call_user_func_array můžeme volat s polem parametrů.

1. <?
2. class Thumb {
3. public $source,$WMax, $HMax, $quality;
4. private $imagesize, $computedsize;
5. public function __construct($source,$WMax=1000, $HMax=1000, $quality=60) {
6. $this->source = $source;
7. $this->WMax = $WMax;
8. $this->HMax = $HMax;
9. $this->quality = $quality;   
10. }
11. public function createThumb($destination) {
12. $image=$this->getSource();
13. $params=array($image, $destination);
14. if ($this->getMimeType()=="jpeg" || $this->getMimeType()=="png") $params[]=$this->getComputedQuality();
15. call_user_func_array('image'.$this->getMimeType(), $params);
16. imagedestroy($image);
17. }
18. public function showThumb() {
19. $image=$this->getSource();
20. $params=array($image);
21. if ($this->getMimeType()=="jpeg" || $this->getMimeType()=="png") {
22. $params[]=NULL;
23. $params[]=$this->getComputedQuality();
24. }
25. header ("Content-type: ".$this->getImageSize('mime'));
26. call_user_func_array('image'.$this->getMimeType(), $params);
27. imagedestroy($image);
28. exit;
29. }
30. private function getSource() {
31. }
32. public function getMimeType() {
33. if (!$this->imagesize) $this->imagesize=getimagesize($this->source);
34. switch ($this->imagesize[2]) {
35. case 1:
36. return 'gif';
37. break;
38. case 2:
39. return 'jpeg';
40. break;
41. case 3:
42. return 'png';
43. break;
44. default:
45. return $this->imagesize['mime'];
46. break;
47. }
48. }
49. public function getImageSize($size=null) {
50. }
51. public function getComputedSize($size=null) {
52. }
53. public function getComputedQuality() {
54. if (!$this->quality>0) return null;
55. if ($this->getMimeType()=="jpeg") return $this->quality;
56. elseif ($this->getMimeType()=="png") {
57. $q=round((100-$this->quality)/10);
58. if ($q>9) $q=9;
59. return $q;
60. }
61. }
62. }
63. ?>

Teď už zbývá vypočítat konečnou šířku a výšku obrázku a funkce getSource vrací změnšený obrázek ke zpracování (uložení, zobrazení).

V ukázce byl použit kód z článku Rekurzivní procházení adresářů s filtrem souborů. Ještě snad zmíním, že nejen funkce imagepng nefunguje jak by měla, ale ani imagegif. Přesto, že deklaruje, že přijímá hodnotu null místo destinace obrázku, nesmí být druhý parametr zadán, pokud chceme výpis na obrazovku. Proto je v kódu tento obrat:

1. $params=array($image);
2. if ($this->getMimeType()=="jpeg" || $this->getMimeType()=="png") {
3. $params[]=NULL;
4. $params[]=$this->getComputedQuality();
5. }
6. header ("Content-type: ".$this->getImageSize('mime'));
7. call_user_func_array('image'.$this->getMimeType(), $params);

Pole params v případě gif obrázků nesmí být rozšířeno!

komentáře

 RSS Komentáře  

Jméno
Název
Text
Lze používat Texy! syntax. Příklad syntaxe: "text odkazu":odkaz, **tučně**, *kurzíva*, `code`. PHP kód uzavírejte do <?php ... ?> a JavaScript do <script> ... </script>

• Hlavní stránka
• O weblogu
• PHP
• Regulární výrazy
• Javascript
• MySQL
• MSSQL
• Dibi
• Nette
• E-business
• XML
• HTML
• Linux
• Ostatní
• Smetí
• To musíš znát!
• Odkazy
• Facebook

 RSS    RSS Komentáře