Vodotisk do obrázků zboží na www.babyobchod.cz

SMO — Fri, 08 May 2009 20:29:13 +0000

Na adrese www.babyobchod.cz je zprovozněn internetový obchod se zaměřením na prodej zboží pro kojence, nemluvňata a děti. V tomto internetovém obchodě, který jsem firmě Artex K, s.r.o. naprogramoval na zakázku, chtěli majitelé automatiky k obrázku vložit vodotisk. Obrázek se nechá připojit k nově vytvářejícímu zboží a nebo k již existujícímu. Zaserfoval jsem po internetu a narazil na pár zdrojáků, které jsem si přepsal do funkce použitelné v jádru obchodu. Výsledná funkce, jejíž zdrojový kód je k dispozici níže, zajišťuje hned 4 úkony:

přerozměruje (převzorkuje) vstupní obrázek na požadované rozlišení (zanechá poměry stran)
vloží do levého dolního rohu černě orámovaný text na bílém pozadí (text představuje URL obchodu)
vloží do pravého dolního rohu černě orámované logo (například logo výrobce zboží)
vloží vodotisk (sloučí vstupní obrázek s externím představující například název nebo logo obchodu)

Musíme mít zajištěno, že obrázek se kterým chceme pracovat, je uložen ve správném adresáři (proměnné v úvodu funkce). Dále správně nastavit cestu k obrázku s logem výrobce a k obrázku pro vodotisk. Logo výrobce se pozicuje od pravého dolního rohu, takže doporučuji, aby nemělo velké rozlišení, maximálně 1/3 obrázku zboží. Obrázek pro vodotisk by měl být menší než požadované výsledné rozlišení, jinak se tam nevejde. Vodotisk by měl být obrázek typu GIF, kde můžeme zajisti průhledné pozadí.

Původní obrázek zboží – autosedačka

Zdrojový obrázek pro vodotisk

Výsledný obrázek zboží s vodotiskem, logem výrobce a URL


  // Převzorkuje obrázek na požadované rozlišení, vloží orámovaný text, logo a vodotisk
  function prevzorkovat($nazev_souboru, $nazev_souboru_logo) {
    $adr_uloziste_souboru = "zaloha_obr";
    $adr_uloziste_souboru_loga = "zaloha_obr/loga";
    $adr_uloziste_vysled_obr = "obr";
    $nazev_souboru_vodotisk = 'bo.gif';
    $poradovana_sirka = 550;
    $poradovana_vyska = 550;
    $url_obchodu = "www.babyobchod.cz";
    $soubor = $adr_uloziste_souboru."/".$nazev_souboru;
    list($sirka, $vyska) = getimagesize($soubor);
    if ($sirka > $vyska) { $nova_sirka = $poradovana_sirka; $nova_vyska = $vyska * ($poradovana_sirka / $sirka); }
    else { $nova_vyska = $poradovana_vyska; $nova_sirka = $sirka * ($poradovana_vyska / $vyska); }
    $zmenseny = imagecreatetruecolor($nova_sirka, $nova_vyska);
    $zdroj = imagecreatefromjpeg($soubor);
    imagecopyresampled($zmenseny, $zdroj, 0, 0, 0, 0, $nova_sirka, $nova_vyska, $sirka, $vyska);
    $cerna_barva = imagecolorallocate($zmenseny, 0, 0, 0);
    $bila_barva = imagecolorallocate($zmenseny, 255, 255, 255);
    imagefilledrectangle($zmenseny, 3, ($nova_vyska - 21), 129, ($nova_vyska - 3), $bila_barva);
    imagerectangle($zmenseny, 3, ($nova_vyska - 21), 129, ($nova_vyska - 3), $cerna_barva);
    imagestring($zmenseny, 3, 7, ($nova_vyska - 19), $url_obchodu, $cerna_barva);
    if ($nazev_souboru_logo != "") {
      $soubor_logo = $adr_uloziste_souboru_loga."/".$nazev_souboru_logo;
      list($sirka_logo, $vyska_logo) = getimagesize($soubor_logo);
      if ($nazev_souboru_vodotisk != "") {
        $soubor_vodotisk = $adr_uloziste_souboru_loga."/".$nazev_souboru_vodotisk;
        list($sirka_vodotisk, $vyska_vodotisk) = getimagesize($nazev_souboru_vodotisk);
        $zdroj_logo = imagecreatefromjpeg($soubor_logo);
        $zdroj_vodotisk = imagecreatefromgif($soubor_vodotisk);
        imagecopymerge($zmenseny, $zdroj_logo, ($nova_sirka - $sirka_logo - 3), ($nova_vyska - $vyska_logo - 3), 0, 0, $sirka_logo, $vyska_logo, 100);
        imagerectangle($zmenseny, ($nova_sirka - $sirka_logo - 3), ($nova_vyska - $vyska_logo - 3), ($nova_sirka - 3), ($nova_vyska - 3), $cerna_barva);
        $xko = ($nova_sirka/2)-($sirka_vodotisk/2); 
        $yko = ($nova_vyska/2)-($vyska_vodotisk/2);
        imagecopymerge($zmenseny, $zdroj_vodotisk, $xko, $yko, 0, 0, $sirka_vodotisk, $sirka_vodotisk, 37);
      }
    }
    imagejpeg($zmenseny, $adr_uloziste_vysled_obr."/".$nazev_souboru);
  }
?>

Flash fotogalerie pomocí SimpleViewer

SMO — Wed, 18 Mar 2009 18:24:51 +0000

Na stránkách SimpleVieweru jsou zdarma ke stažení zdrojové kódy SimpleViewer v1.9. Ukážeme si jak tuto pěknou flashovou fotogalerii upravit k obrazu svému a publikovat jí na webu – třeba v tomto blogu.

1. Stáhnout soubor http://www.airtightinteractive.com/simpleviewer/simpleviewer.zip

2. Rozbalit ZIP soubor do vhodného adresáře a seznámit se danými soubory a adresáři.

adresář images je místo pro fotky s větším rozlišením (doporučuji max. 900 x 670 px)
adresář thumbs je místo pro fotky s malým rozlišením (doporučuji max. 170 x 130 px)
soubor gallery.xml je klíčový datový soubor ze seznamem publikovaných fotografií
soubor index.html je soubor pro spuštění fotogalerie
swfobject.js je pomocný soubor obsahující JavaScriptové funkce potřební k funkčnosti
viewer.swf je pomocný flashový soubor tvořící výsledný grafický vzhled v prohlížeči

3. Pomocí grafického editoru vhodně upravit „syrové“ fotky z fotoaparátu a nakopírovat do příslušných adresářů.

Pro práci z fotografiemi používám Zoner Media Photo Studio. Myslím, že práce s fotkami je zde opravdu efektivní. Lze zde jednoduše označit několik fotografií, zadat výsledný rozměr v pixelech a ZMPS za nás všechny fotky přerozměruje.

ZMPS – přerozměrování fotek

4. Vytvořit nebo vygenerovat soubor gallery.xml ze seznamem názvů fotek.

Předtím, než vygenerujeme XML soubor bych vhodně pojmenoval soubory s fotkami. A to ve formátu prefix_cislo.jpg. Konkrétně teda ap_01.jpg. Takovéto hromadné přejmenování hravě zvládne TotalCommander. Akci vyvoláme v menu Soubor > Hromadné přejmenování.

TotalCommander – hromadné přejmenování souborů

Pro tento případ jsem si napsal v PHPčku skriptík, který XML soubor vygeneruje. Stačí zde vhodně zadat počáteční proměnné jako je: počáteční číslo první fotky, celkový počet fotek a prefix názvu soubor.


  $cislo   = 1;     // počáteční číslo
  $celkem  = 16;    // celkem fotek 
  $prefix  = 'a&p'; // prefix názvu souborů
  $text    = 'Vygenerováno 1.3.2009 v 20:10 hod. | SMO © 2009';
  for ($i = 1; $i <= $celkem; $i++) {
    if ($cislo < 10) { $cislo = '0'.$cislo; }
    $soubor .= "n";
    $soubor.= "  ".$prefix."_".$cislo.".jpgn";
    $soubor .= "  #ffe21a" size="10">";
    $soubor .= $text."]]>n";
    $soubor .= "n";
    $cislo++;
  }
  $file = fopen("gallery.xml", "w");
  fwrite($file, $soubor);
  fclose($file);
?>

Do záhlaví XML souboru je nutno ještě přidat hlavičku, informace o grafickém vzhledu a maximálních velikostech fotogalerie.

 version="1.0" encoding="UTF-8"?>
 maxImageWidth="570" maxImageHeight="550"
   textColor="0xFFFFFF" frameColor="0xFFFFFF" frameWidth="3"
   stagePadding="17" navPadding="17" thumbnailColumns="5"
   thumbnailRows="1" navPosition="top" vAlign="center"
   hAlign="center" enableRightClickOpen="true"
   backgroundImagePath="" imagePath="" thumbPath="">

5. Hotovo. Výsledná fotogalarie vypadá takto.

Fotogaleriie ve větším rozlišení možno shlédnout na: http://zkusmo.cz/fotogalerie/2009/2009-02-28_ajicek_pajicek/

SMO Blog » PHP

Vodotisk do obrázků zboží na www.babyobchod.cz

Flash fotogalerie pomocí SimpleViewer