Dinamično kreiranje / Upravljanje slik

23rd March

Dinamično kreiranje oz. upravljanje slik (na centralni lokaciji), ki jih imamo na strežniku in jih na primer prikazujemo skozi HTML Img tag nam včasih pride zelo prav:

povečevanje / zmanjševanje slike brez popačenja (kot naprimer pride pri img tag, če defeniramo napačno širino / višino)
če slika ne obstaja lahko podamo generično sliko, ki sporoči uporabniku, da slike ni moč najti
lahko kontroliramo ali prikažemo sliko ali ne (lahko prikažemo tudi drugo sliko)
v primeru fizičnega premikanja slike na FTP-ju (strežniku) nam v img tagu še vedno ostane enak klic PHP datoteke

Sploh prva možnost zna biti zelo uporabna. Poglejmo si primer kode, ki bo sliko dinamično povečala / zmanjšala:

PLAIN TEXT

PHP:

$width = ($width !== false) ? $width : imagesx($original);
$height = ($height !== false) ? $height : imagesy($original);
$newImage = imagecreatetruecolor($width, $height); //RM Output new image
imagecopyresampled($newImage, $original, 0, 0, 0, 0, $width, $height, imagesx($original), imagesy($original));
header ("Content-type: image/jpeg");
@ImageJPEG ($newImage);
exit;

Primer klica PHP skripte skozi HTML Img tag:

PLAIN TEXT

HTML:

<img src="getimage.php?image=trsplet" alt="This is trsplet site image" />
<img src="getimage.php?image=trsplet&default=1" alt="This is trsplet site image" />
<img src="getimage.php?image=trsplet&default=1&width=500&height=300" alt="This is trsplet site image" />

#1: PHP prikaže sliko, če ta obstaja. V primeru, da ne obstaja vrne 404 error - site not found.

#2: PHP prikaže sliko, če ta obstaja. V primeru, da ne obstaja vrne privzeto sliko s katero želimo uporabniku sporočiti, da je prišlo do napake.

#3: PHP prikaže sliko s točno določeno višino ali širino

Varnost:
Podobno kot pri centralni skripti za upravljanje datotek tudi tukaj obstaja možnost, da bi kdo poskušal dobiti datoteke, ki jih nočemo prikazati oz. ne bi smeli biti javne ali pa te datoteke niso slike. Da se proti temu zavarujemo naredimo sledeče:

pogledamo ali je podana datoteka res slika
filename URL parameter dodamo k naši osnovni pot, tako da ne uporabimo direktno pot iz URL-ja (v primeru, da je kdo hotel dobiti datoteko izven images direktorija)

Primer skripte, ki skrbi zato:

PLAIN TEXT

PHP:

$imagePath = '/static/images/'; //RM Add your path to images
$file = $imagePath . $image;
if (file_exsists($file) and is_readable($file)) {
$info = getimagesize($file);
if ($info !== false and isset($mimeTypes[$info['mime']]) and ($imageType = $mimeTypes[$info['mime']])) {
//RM This is picture ...
}
}

Datoteke:

Več informacij:

Deli s skupnostjo:

Podobni članki:

Roky || Sunday, March 23rd, 2008 ob 7:00 pm || Splet, Splet (PHP & MySQL) || RSS 2.0 | Dodaj komentar || Trackback

fett je napisal:
March 24th, 2008 ob 2:36 pm

Link na bmp.php ne pokaže sourca (preimenuj v .inc). A si lahko bmp.php sposodim za svojo WideImage knjižnico?

Roky je napisal:
March 24th, 2008 ob 3:59 pm

Sem popravil v .inc. Source ni moj, je pa prosto dostopen, ampak od JPEX (v source kodi zapisano). Sem dodal avtorja v link.

Njegova stran: http://www.jpexs.com/news.html
Download: http://www.jpexs.com/download/php/bmp.php

fett je napisal:
March 24th, 2008 ob 5:00 pm

hvala

Roky je napisal:
March 24th, 2008 ob 6:31 pm

Ni problema, z veseljem:P

brezimenko je napisal:
March 24th, 2008 ob 8:17 pm

Mene mal bega tole z mimetype-om slike. V eni od skript sem preverjal, če je uporabnik naložil dovoljeno vrsto datoteke. V primeru da je naložil *.jp(e)g sliko preko IE (6 in 7), je skripta datoteko zavrnila, češ da ni v pravem formatu, kjub "image/jpeg". V ostalih brkskalnikih je delovalo. Ko pa sem dodal za primer *.jpg slike v preverjanje "image/pjpeg", pa je delovalo tudi v IE-ju.

Roky je napisal:
March 24th, 2008 ob 9:16 pm

PJPEG - progressive JPEG - http://www.faqs.org/faqs/jpeg-faq/part1/section-11.html

Drugače pa probaj ugotovit mimetype od slike z http://www.php.net/manual/en/function.exif-imagetype.php in sporoči če bo boljše.

smottt je napisal:
March 24th, 2008 ob 9:32 pm

ja, IE ima svoje muhe. tudi pri .png moraš dodat image/x-png in podobne

brezimenko je napisal:
March 24th, 2008 ob 9:32 pm

A maš še kkšen tak zanimiv link kjer bi recimo bila razlaga, zakaj je razlika v IE (tipično ) napram ostalim brskalnikom?
Drugače pa hvala.

Roky je napisal:
March 24th, 2008 ob 9:53 pm

Nekaj najdeš tudi tukaj http://seewhatever.de/blog/?p=50 ... IE podpira PJPEG, Firefox pa ne:P (neki novga).

@smottt: Upamo na boljše čase z Firefox 3, IE 8

smottt je napisal:
March 24th, 2008 ob 10:21 pm

upamo upamo samo še zmeraj bo treba za kompatibilnost za nazaj gledat..

Roky je napisal:
March 25th, 2008 ob 11:35 am

Ja, čeprov skoz manj. IE 5, 5.5 se skoerj nikjer ne gleda. Ko pride IE 8.0 bomo (vsaj zdi se mi al pa bolj rečen, upam) ukinl podporo za IE 6.0, pa bo IE 7.0 tist najnižji. Bomo videli:)

gasper_k je napisal:
March 26th, 2008 ob 6:18 pm

IE lahko enostavno prevaraš; v url za sliko dodaš ime slike na koncu, recimo takole:

http://url/slika.php?id=34&file=/slikica.jpg

in IE misli, da je datoteki ime slikica.jpg, ne glede na vse headerje na svetu.

Roky je napisal:
March 26th, 2008 ob 9:46 pm

Kul stvar, nisem vedel.

PHP knjižice za delo s slikami – WideImage | Thumbnailer | .: TRSplet - internetne storitve :. je napisal:
August 12th, 2009 ob 7:01 am

[...] O osnovnih operacijah s pomočjo GD knjižnice nad slikami smo na T&R Splet blogu že opisali. Sedaj si poglejmo nekaj primerov operacij s knjižnico WideImage ter Thumbnail. WideImage knjižnica je slovenskega porekla (Fatg), Thumbnailer pa gostuje Ian Selby. Ob brskanju informacij o avtorju te skripte sem opazil, da je na voljo nova izboljšana verzija Thumbnailer-ja, ki se sedaj imenuje PHP Thumb. [...]

T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

Izdelava spletnih strani