Tags:    php

Indledning

Min knapt så kreative hjerne er kommet op med titlen ”Ikon på billede” til denne artikel, hvilket jo ikke er den mest ”ligetil” titel, men det går kort og godt ud på:
Ved brugen af PHP og GDLib vil jeg placere et billede oven på et andet, hmm tja, det kan f.eks. se ud som følgende:


Jeg håber det gjorde det hele lidt mere forståeligt, for nu starter det. Dog skal jeg lige sige, at de billeder jeg bruger som ikoner er PNG-24, og der er derfor understøttelse af 8-bit transparent(eller hvad det nu heder, hold mig ikke på det korrekte ord), ”that’s why kids, when you try this at home, remember to use PNG-24”.

IconizeImage

Tja vi springer ud i det med det samme. Jeg har lavet en funktion som jeg har valgt at kalde IconizeImage, og det den gør er at smide et billede oven på et andet, som denne artikel jo handler om (så det var da meget heldigt):

function IconizeImage($imgBack, $imgIcon, $imgDest = 'iconized.jpg') { 
  $imgX = imagesx($imgIcon); 
  $imgY = imagesy($imgIcon); 
//  imagealphablending($imgBack, 1); 
   
  imagecopy($imgBack, $imgIcon, 0, 0, 0, 0, $imgX, $imgY); 
   
  imagejpeg($imgBack, $imgDest, 100); 
  imagedestroy($imgBack); 
  imagedestroy($imgIcon); 
}

Funktionen indeholder 3 argumenter. Det først værende det billede du vil lægge et ikon på, den næste selve ikonet, det sidste argument er hvad det billede du vil lave skal hede. Jeg vil lige sige nu mens jeg er i gang at funktionen kun er lavet til eksemplet her, den kan laves en del mere brugervenlig, hvis man ikke helt ved hvad man vil gemme sine billeder som. Det skal lige siges at de 2 første argumenter skal være image ressources, du skal altså f.eks. selv bruge imagecreatefromjpng hvis det er et png billede du arbejder med. Lad mig lige give et eksempel:

IconizeImage(imagecreatefromjpeg('icback.jpg'), imagecreatefrompng('icon.png'));

De 2 billeder jeg har brugt heder icback.jpg (billedet jeg ønsker skal havde et ikon) og icon.png (ikonet). Når men lad mig hurtigt løbe koden igennem.
Først finder vi størrelsen af ikonet, som skal bruges når man kopiere dette over på det baggrundsbilledet.
Den kommenterede linje kan du vælge at fjerne, men i tidligere PHP versioner er alphablending ikke slået til pr. standard, og du skal derfor uncomment denne del af koden hvis din alphakanal ikke regnes med når billedet kopieres (hvis du ikke er helt med her, så gør det ikke noget hvis du har en nyere version af PHP skal der slet ikke tænkes på dette).
Dernæst kopieres de to billeder ovenpå hinanden. Slå evt. denne funktion op i php manualen, for at vide hvilken argumenter der er placeringen af de forskellige billeder.
Så laves billedet, denne gang som et jpeg billede men i konklusionen lige som lidt vil jeg sammenligne resultatet mellem et jpeg og et png.

Konklusion

Jeg håber du har forstået hvordan det hele virker, for den funktion jeg har lavet er mest til test, den ville ikke gøre sig godt i et større system.
Denne viden ville man kunne gøre god brug af, hvis man havde et billede galleri, kunne man smide sit eget lille ikon på alle billederne efterhånden som de blev uploadet. Men nok om hvad man egentlig kan bruge det til, jeg tænkte nemlig på at kigge lidt på det sidste billede man ville få ud af det hele.
Jeg har valgt at bruge følgende billeder som test billeder(det første er baggrunden og det andet er ikonet):



Jeg har valgt og prøve at gemme disse to billeder som henholdsvis png og jpeg, resultatet blev følgende. Dette kræver du ændrer følgende linje:

  imagejpeg($imgBack, $imgDest, 100);

til

  imagepng($imgBack, $imgDest);

Og for en ordensskyld så lav navnet på $imgDest om til iconized.png. Resultatet ser ud som følgende, png til venstre og jpeg til højre, (det skal dog siges at jeg har brugt en lav jpeg kvalitet til billedet der skal vises her, hvis du selv vil prøve dette, så hent baggrundsbilledet ovenfår og ikon billedet til sidst i artiklen):


På trods af den lidt gnidrede jpeg kvalitet kan man tydeligt se, at hvis man laver den endelige fil i png vil ens resultat på ikonet man laver blive langt bedre end hvis dette gemmes som jpg. Der er dog lige en lille (bør læses stor) faktor som gør det ikke altid er lige smart bare at gemme som png. Størrelsen på billedet, bruger man jpeg (selv med dårligste komprimering og bedste kvalitet) vil billedet høstsandsynligt blive mindre end billedet i png, i mit eksempel er størrelserne som følgende:
JPEG: 81,788 kb
PNG: 191,854 kb
Dette svare i mit eksempel til at png billedet er 2,3 gange større end mit jpeg. Og arbejder man med dette til hjemmesider (hvilket man højst sandsynligt gør) har størrelsen alligevel noget at skulle havde sagt. Men det er jo alt sammen op til den enkelte.
Jeg håber som sagt, at der er nogen som har lært lidt af denne artikel på trods af det endte med at blive mere konklusion end egentlig kode. Når ja og som jeg lovede så kan du nedenfor hente ikon billedet jeg har brugt:


Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.

Del også gerne artiklen med dine Facebook venner:  

Karma barometer (30 dage)

IT jobs | Kontakt | Om Udvikleren.dk | Om karma | IT nyheds arkiv | Annoncering

X