Tero Laakso | PHP | Thumbnails-kuvien generointi PHP-kielellä

Monilla nettisivuilla tarvitaan erilaisia toimintoja, joilla käyttäjälle annetaan mahdollisuus generoida palvelimelle esim. PDF-tiedosto tietokantaan tallennetusta tai käyttäjän itsensä palvelimelle lähettämästä materiaalista. Lisäksi käyttäjälle tarjotaan nappia painamalla mahdollisuus ladata tuottamansa tiedosto kotikoneelleen.

Ensiajattelulla tuollaisen ratkaisun toteuttaminen vaikkapa omille kotisivuille asennettavaksi voisi tuntua aivan ylivoimaiselta haasteelta, mutta itseasiassa tarkemmalla asian tutkimisella osoittautuu, että esim. JPG, PDF, XLS tai SWF -muotoisen materiaalin dynaaminen tuottaminen palvelimelle ei olekaan PHP-skriptien avulla aivan toivoton urakka.

Opastan tässä ensimmäisessä palvelinpuolengenerointitutoriaalissani thumbnails-kuvien generoimisen palvelimelle. Eli opastan kuinka PHP-skriptillä voi tavalliselta XHTML-sivulta tai Flash-komponentista laukaistaessa luoda automaattisesti käyttäjän antamista jpg-kuvista pienennetyt versiot.

TARVITTAVAT KIRJASTOT, ESITIEDOT JA LOPPUTULOS:

Omille sivuilleni toteuttama thumbnails-generointi vaatii toimiakseen GD -kirjaston asentamisen nettisivuston palvelimelle. Onneksi tämä on aika laajalti tuettu kirjasto. Esim. oma palveluntarjoajani Sigmatic tukee tätä kirjastoa.

Varsin hyvän kuvan Thumbnails-kuvien generoinnista PHP-kielellä ja GD-kirjastolla saa mm. oppaista 1 ja 2 . Itse toteutin tuon oman generaattorini oppaan 1 perusteella.

Olen viime aikoina ohjelmoinut lähinnä Flash/AS3-ratkaisuja, joten tässäkin esimerkissä olen yhdistänyt tuon PHP-skriptin osaksi Flash-komponenttia, joka käynnistyessään generoi (jos kuvia ei vielä ole olemassa) palvelimella annetusta XML-tiedostosta lukemistaan kuvaosoitteista vastaavat Thumbs-kuvat thumbs-alihakemistoon. Flash-komponenttia käytettäessä ei siis itse tarvitse tehdä thumbs-kuvia, vaan ne generoidaan automaattisesti originaaleista.

Toimivan Flash-komponentin näkee tästä.

PHP-SKRIPTI

Itseasiassa thumbsnail-kuvien generointi PHP:n, GD:n ja tutoriaalin 1. perusteella on pitkälti leikkaa/liimaa-operaatio. Itse tallensin alla olevan koodin tiedostoksi create_thumbs.php:


<?php

// Only run this script if the sendRequest is from our flash application
if ($_POST['sendRequest'] == "parse") {

function createThumbs( $pathToImages, $pathToThumbs, $thumbHeight )
{
  // open the directory
  $dir = opendir( $pathToImages );

  // loop through it, looking for any/all JPG files:
  while (false !== ($fname = readdir( $dir ))) {
	// Do only if thumb image file don't exist
	if( !file_exists("{$pathToThumbs}{$fname}") ) {	  	  
    	// parse path for the extension
    	$info = pathinfo($pathToImages . $fname);
    	// continue only if this is a JPEG image
    	if ( (strtolower($info['extension']) == 'jpg') ||  (strtolower($info['extension']) == 'jpeg') )
    	{
      		//echo "Creating thumbnail for {$fname} <br />";

      		// load image and get image size
      		$img = imagecreatefromjpeg( "{$pathToImages}{$fname}" );
      		$width = imagesx( $img );
      		$height = imagesy( $img );

      		// calculate thumbnail size
      		$new_height = $thumbHeight;
		  	$new_width  = floor( $width * ( $thumbHeight / $height ) );
	
      		// create a new temporary image
      		$tmp_img = imagecreatetruecolor( $new_width, $new_height );

      		// copy and resize old image into new image
      		imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height );

      		// save thumbnail into a file
      		imagejpeg( $tmp_img, "{$pathToThumbs}{$fname}" );
    	}
	}
  }
  // close the directory
  closedir( $dir );
}

if( !file_exists("./thumbs") ) {
	mkdir("./thumbs");
}

// call createThumb function and pass to it as parameters the path
// to the directory that contains images, the path to the directory
// in which thumbnails will be placed and the thumbnail's width.
// We are assuming that the path will be a relative path working
// both in the filesystem, and through the web for links

createThumbs("./pics/","./thumbs/", 225);
echo "success=1";

}

?>

Muutamia huomioita yllä olevasta PHP-koodista:

a) Kirjoita PHP-koodi aina tagien <?php ja ?> sisään.

b) Muuttujat välitetään PHP-skriptille XHTML-sivulta tai Flash-komponentista yleensä $_POST -taulukossa (yleensä lomakkeet) tai $_GET -taulukossa (osoiteriviltä esim. nettiosoite.com?muuttuja1=arvo1&muuttuja2=arvo2

c) PHP-skripteissä on syytä kiinnittää erityistä huomiota ulkopuolelta taulukoissa $_POST ja $_GET toimitettavien muuttujien arvojen tarkistukseen vihamielisen syötteen varalta.

d) Muuttujien arvoja voi lähettää takaisin Flash-komponentille esim. "echottamalla" seuraavasti: Huomasin, että tuo Flashiin PHP-skriptistä echotus on ilmeisesti syytä tehdä aina (vaikkei käyttäisikään muuttujia mihinkään). Sain oman Flash-komponenttini kaatumaan IE:ssä (vaikka FF:ssä toimikin) Flash Player 10 -virheeseen, koska playeri ei ollut tyytyväinen, kun mitään muuttujaa ei lähetetty PHP-skriptistä takaisin Flash-komponenttiin.

Muuttujat tavalliselle XHTML-sivulle voi lähettää vaikkapa osoiterivillä uudelleenohjauksen yhteydessä. Esim.

e) Skriptin alussa oleva if-tarkistus on vain Flash-toteutuksia varten ja on poistettava jos on tarkoitus hyödyntää skriptiä suoraan XHTML:stä käsin.

FLASH-TOTEUTUS:

Perusajatus Flashissa/AS3:ssa tiedoston lukemisessa/kirjoittamisessa/suorittamisessa on aina sama oli kyseessä sitten XML-tiedosto, PHP-skripti tai JPG-kuva:

a) Kommunikointi PHP:n ja FLASHIN/AS3:n välillä hoidetaan (tai ainakin minä hoidan) luokkien URLRequest ja URLLoader avulla sekä lisäksi muuttujia lähetettäessä/vastaanotettaessa tarvitaan apuna luokkaa URLVariables.

b) Lataamisen etenemisen/valmistumisen tarkkailu suoritetaan liittämällä URLLoaderiin tapahtumankäsittelijä(t) addEventListener-metod(e)illa.

c) Varsinainen lataaminen käynnistetään kutsumalla URLLoaderin load-metodia.

Alla oleva esimerkkikoodi (otettu tuon Flash-kuvaselaimeni lähdekoodista) demonstroi tavallisen kommunikointitapauksen Flashin/AS3:n ja PHP-skriptin välillä.

Muutama oleellinen havainto AS3-koodista:

i) Huomaa createThumbs-funktiosta kuinka muuttujien lähettäminen Flash -> PHP-skripti suoritetaan (URLRequest,URLRequestMethod.POST, URLLoaderDataFormat.VARIABLES, addEventListener, sendRequest, load).

ii) Huomaa, että funktio thumbsCompleteHandler suoritetaan automaattisesti, kun tiedosto create_thumbs.php on suoritettu (ja vasta sitten). Tämä on oleellista, sillä haluammehan, että thumbnails-kuvat on generoitu palvelimelle ennen kuin yritämme niitä funktiossa thumbsCompleteHandler tallentaa DataProvider-objektiin.

iii) Tilelist-luokka tarjoaa yhden hyvän tavan järjestää kuvia Flashiin. Itse käytin tuossa ratkaisussani lisäksi tuota TileListiin pohjautuvaa drag-and-drop -ratkaisua.

iv) Kuvien siirtymäanimaatioissa on syytä käyttää bugisen Tween-luokan (ainakin ennen oli) jotain ulkopuolista ratkaisua esim. TweenLitea.


	var variables:URLVariables;
	var varSend:URLRequest;
	var varLoader:URLLoader;

	function createThumbs() {
		variables      = new URLVariables();
		varSend        = new URLRequest("create_thumbs.php");
		varSend.method = URLRequestMethod.POST;
		varSend.data = variables;
		// Build the varLoader variable
		varLoader            = new URLLoader();
		varLoader.dataFormat = URLLoaderDataFormat.VARIABLES;
		varLoader.addEventListener(Event.COMPLETE, thumbsCompleteHandler);
	
   		variables.se          = new String("send");
		variables.sendRequest = "parse";
	
		// Send the data to the php file
   		varLoader.load(varSend);
	}
	
	function thumbsCompleteHandler(e:Event):void{
		bPhoto2 = new butterfly_photo_mc();
		var tltf:TextFormat = new TextFormat();

		var fStr:String          = new String(); 
		var filenameShort:String = new String();
		dp                       = new DataProvider();
		
		for(var i = 0;i<fileArrayLength;i++)
		{
			fStr = fileArray[i];
		
			if( fStr.lastIndexOf("/") != -1 ) {
				filenameShort = fStr.substr(fStr.lastIndexOf("/")+1,fStr.length);
			}
			else {
				filenameShort = fStr;
			}
		
			filenameShort = "./thumbs/" + filenameShort;
			dp.addItem({kt:"", src:filenameShort, label:"", scaleContent:true,nu:i});
		}
		
		//set textFormat font, color, and size
		tltf.font = "Verdana";
		tltf.bold = true;
		tltf.color = 0x000000;
		tltf.size = 10;

		tList.setStyle('cellRenderer', ImageCell);
		tList.sourceField = "src";
		tList.dataProvider = dp;
		tList.allowMultipleSelection = false;
		tList.columnWidth = 150;
		tList.rowHeight = 150;
		//tList.move(25,10);
		tList.scrollPolicy = ScrollPolicy.OFF;
		//tList.direction = ScrollBarDirection.HORIZONTAL;

		tList.columnCount = 5;
		tList.rowCount = 1;

		tList.setStyle("contentPadding", 5);
		tList.setRendererStyle("textFormat", tltf);
		tList.setRendererStyle("imagePadding", 5);
		tList.setRendererStyle("textOverlayAlpha", 1.0);
		tList.setRendererStyle("textPadding", 0);
		tList.setRendererStyle("backgroundColor", "0x000000");
		tList.setRendererStyle("backgroundAlpha", 0.5);

		tList.canDragFrom = true;  
		tList.dragRemovesItem = true;
		tList.dropOffRemovesItem = false;
		tList.canDropOn = true; 
		tList.dragAlpha = .43;
		tList.autoScroll = true;
		tList.scrollZone = .15;
		tList.scrollSpeed = 3;
		tList.allowDuplicates = false;

		tList.width  = 700;
		tList.height = 150;

		tList.visible = true;
		tList.selectedItem=dp.getItemAt(0);
		tList.addEventListener(Event.CHANGE,selezione);
	    
		imageSprite2.addChild(tList);
		tList.x  = 0;
		tList.y  = 0;
	
		bPhoto2.addChild(imageSprite2);
		imageSprite2.x = 0;
		imageSprite2.y = 0;
		 
		stage.addChild(bPhoto2);
		 bPhoto2.x = 145;
		 bPhoto2.y = 100;
		 
		 pBtn2.tabIndex            = 1;
		 tList.tabIndex            = 2;
		 nBtn2.tabIndex            = 3;
		 pBtn.tabIndex             = 4;
		 nBtn.tabIndex             = 6;
		 
		  nBtn2.focusRect   = false;
		  pBtn2.focusRect   = false;
		  nBtn.focusRect    = false;
		  pBtn.focusRect    = false;
		 
		 //material04 = new MovieMaterial( bPhoto2, 40, new MaterialAttributes (lA));
		 
		 //net2.appearance = app03;
}

Thumbsnails-kuvien generoimiseksi tarvitsee siis kutsua palvelimella suoritettavaa PHP-skriptiä, jonka kanssa Flash-komponentin on kommunikoitava molempiin suuntiin.

Onneksi kommunikointi XML-tiedostoja ja JPG-kuvia ladattaessa pystytään hoitamaan ilman palvelinpuolen skriptausta. Riittää, että luetaan samanlaisen käyttöliittymän kautta XML-tiedostoja ja JPG-tiedostoja kuin PHP-tiedostoja. Itse XML-tiedoston sisältöön pääsee AS3:lla kätevästi käsiksi XML-luokan kautta.

Alla oleva AS3-koodi demonstroi tiedoston gallery-photos.xml (katso XML-tiedoston sisältö ja vertaa alla olevaan kyseisen tiedoston lukemiseksi tehtyyn AS3-koodiin) lukemisen ja tallentamisen AS3-muuttujiin.

Nippelitietona todettakoon, että jos tuon XML-tiedoston avaa nettiselaimessa katseltavaksi niin nettiselain tulkkaa osan koodista, jolloin varsinaisen lähdekoodin näkee esim. avaamalla gallery-photos.xml:n nettiselaimeen ja valitsemalla valikoista lähdekoodin katselun (FF: Näytä->Sivun lähdekoodi,Ctrl+U) tai FF:ssä klikkaamalla linkkiä hiiren oikealla napilla -> Tallenna kohde levylle ja avaamalla tiedosto jossain tekstieditorissa.


var xmlLoader:URLLoader;
var xmlData:XML;

// Tapahtumankäsittelijät lukuvirheen ja onnistuneen lukemisen käsittelemiseksi.
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
xmlLoader.addEventListener(IOErrorEvent.IO_ERROR, noFile);

var xmlFileName:String = new String("gallery-photos.xml");

// Luetaan tiedosto gallery-photos.xml eli päädytään (toivottavasti) funktioon loadXML
xmlLoader.load(new URLRequest(xmlFileName));

	function LoadXML(e:Event):void {
		xmlData = new XML(e.target.data);
		ParseImages(xmlData);
	}

	function noFile(evt:IOErrorEvent):void {
		captionText.text = "XML file gallery-photos.xml not found.";
	}
	
	function ParseImages(imageInput:XML):void {
	/* Get the gallery caption from imageg.xml */
	
	mainCaptionText = imageInput.gallerycaption[0].text();
	
	/* Check how many filenames are stored in images.xml */
	fileStr   = imageInput.image.filename;
	fileArray = fileStr.split("\n");
	fileArrayLength = fileArray.length;
	
	/* Store the imagenames and caption text to arrays */
	fileArray                = new Array();
	dp                       = new DataProvider();
	
	for(i = 0;i<fileArrayLength;i++)
	{
		fileArray.push(imageInput.image.filename[i]);
		captionArray.push(imageInput.image.imagecaption[i]);
	}
	
 	imageRequest = new URLRequest(new String(imageInput.image.filename[currentImage]));
	imageLoader.load(imageRequest);
	
	totalImages.htmlText   = String(fileArrayLength);
	currentIndex.htmlText  = String(currentImage+1);
	
	
	currentIndex.htmlText   = String(currentImage+1);
	totalImages.htmlText    = new String(fileArrayLength);
	captionText.htmlText    = captionArray[currentImage];
	mainCaption.htmlText    = mainCaptionText;
	
	createThumbs();
}

Olen yllä käynyt oleellisimmat asiat thumbnails-generaattorin toteuttamiseksi omalle nettisivustolle. Opastamatta jäi vielä kuinka toteuttaa Flashilla/AS3:lla käyttäjälle mahdollisuus ladata palvelimelle generoitu thumbnails-kuva omalle kotikoneelle. Mutta se olisikin jo oma tutoriaalinsa...

Vihjeenä edelliseen voin vihjata, että FileReference ja download-metodi auttavat asiassa. Ja pitää lisäksi muistaa Flash Player 10:n tietoturvaan liittyvä asia , joka on monelle aiheuttanut harmaita hiuksia, kun ovat ihmetelleet (allekirjoittaneella omakohtaisia kokemuksia?), ettei mitään dialogia ilmesty ruudulle...

Takaisin PHP-ohjelmoinnin etusivulle

PHP: Thumbnails-kuvien generointi PHP-kielellä