[PHP] plaatjes draaien met GD, maar dan fatsoenlijk

[Sgreehder]

Kleine website voor een vereniging, moeten wat foto's op, en ik wilde even een klein feat toepassen op de mapjes waarin de verschillende foto's gesorteerd staan. Het concept via een bekend grafisch pakket ziet er zo uit:



Lekker simpel. Gebruiker klikt er op, en krijgt een mooi overzicht van foto's in dat mapje. Nu kan ik met actions wel met de hand wel wat van die afbeeldingen in elkaar zetten, maar daarvoor gebruiken we PHP. Drie willekeurige afbeeldingen kiezen, verkleinen, croppen, over elkaar leggen en draaien. Dus:



En dan:



Argh, dus. Het ziet er niet uit. Heb ik iets gemist en kun je GD in kwaliteitsmodus zetten voor een rotate? Of ben ik overgeleverd aan het gebruik van een paar templates en een lange tijd van uitmeten en uitlijnen, en verschrikkelijk lelijke gedraaide foto's, of zelfs genoegen nemen met het tweede voorbeeld, zonder een rotate?

[RedHat]

Je hebt tegenwoordig toch ook andere pakketten die dat veel beter kunnen?

http://www.imagemagick.org/script/index.php

Moet je wel de PHP-versies bekijken natuurlijk

[ Voor 17% gewijzigd door RedHat op 30-07-2010 11:51 ]

[chem]

Moderne browsers kunnen dit met css3 transforms client-side doen met hippe animaties als toevoeging. Wellicht een leuke idee?

[Sissy boy]

Kun je niet zoiets gebruiken?
http://code.google.com/p/jqueryrotate/

[RedHat]

chem schreef op vrijdag 30 juli 2010 @ 11:52:
Moderne browsers kunnen dit met css3 transforms client-side doen met hippe animaties als toevoeging. Wellicht een leuke idee?

Als je er niet op tegen bent om het clientside te doen is dat de (imho) betere oplossing.
Maar goed; als je veel IE7/FF2 gebruikers hebt wordt het al wat lastiger.

[ Voor 10% gewijzigd door RedHat op 30-07-2010 11:54 ]

[Skef]

Ik zou inderdaad kijken naar ImageMagick. Deze heeft zelfs de "Polaroid" functie al ingebakken zitten, dus dat scheelt je ook randjes om je foto's heen zetten. Kun je gewoon je ruwe jpg's uploaden...

[Sgreehder]

Skef schreef op vrijdag 30 juli 2010 @ 11:53:
Ik zou inderdaad kijken naar ImageMagick. Deze heeft zelfs de "Polaroid" functie al ingebakken zitten, dus dat scheelt je ook randjes om je foto's heen zetten. Kun je gewoon je ruwe jpg's uploaden...

Nee, die randjes zijn ook gewoon GD's imagerectangle. Nou, in elk geval bevat het doelservertje een imagick extensie, dat scheelt weer.

[defcon84]

mss helpt AA wel:
imageantialias($image, true);

[Johnny]

Ik zou het eerst op een hogre resolutie dan en dan resamplen naar thumbnailformaat. Je kan dan de meeste code die je nu hebt gewoon hergebruiken.

[Noxious]

Ik heb iets soortgelijks wel eens gedaan met PHP, maar dan op 'groter formaat' met dikkere randen en daarna verkleinen met http://www.php.net/manual/en/function.imagecopyresampled.php

@Johnny HEU ik was aan het zoeken naar de functienaam ja, ik was eerder!

[ Voor 19% gewijzigd door Noxious op 30-07-2010 12:11 ]

[djluc]

Inderdaad, met een groot origineel werken. Dan zijn de details foutjes straks door de resize meteen vrijwel niet meer zichtbaar. Kost je wel meer processing time dus daar op letten als je dit met grote aantallen doet. Clientside lijkt me een betere oplossing als je browser doelgroep dat toestaat.

[kwaakvaak_v2]

zit zoals hierboven gemeld gewoon standaard in imagemagick 6

code:

  montage -size 400x400 null: ../img_photos/[a-m]*_orig.* null: \
          -auto-orient  -thumbnail 200x200 \
          -bordercolor Lavender -background black +polaroid -resize 30% \
          -gravity center -background none -extent 80x80 \
          -background SkyBlue -geometry -10+2  -tile x1  polaroid_overlap.jpg

geeft

[ Voor 10% gewijzigd door kwaakvaak_v2 op 30-07-2010 13:31 . Reden: voorbeeld plaatje ]

[Sgreehder]

Leuk voorbeeld. Die parameters neem ik wel even over, ook voor de thumbnails zelf zal een beetje willekeurige variatie (heel licht draaien, zonder dat het storend wordt) misschien ook erg leuk worden. Ik moet eerst even door de download en install van Xcode heen, daarna met ApplePorts een ImageMagick erop knikkeren en kijken of MAMP ook nog wil meewerken. Hihi, relaxed ontwikkelen op OS X als je even van het bekende pad af moet ;-)

[Sgreehder]

Nou, het is gelukt. Uiteindelijk heb ik gekozen voor een oplossing door te upscalen en een custom imagerotate (de standaard GD functie is nog al eens uitgeschakeld door een geheugenlek of iets dergelijks). Dan is het resultaat zeer aardig. Ik zou denk ik nog steeds hebben gekozen voor de imagick plugin, maar het kreng wilde niet starten op m'n zandbox; iets met libfreetype. Ik ga natuurlijk geen uren zitten klungelen met configure's en make's op een OS X bak.

[Wolfboy]

Daar mag nog steeds wel wat antialiasing overheen als je het mij vraagt

Of je resize werkt nog niet goed of je moet verder upscalen. Maar als ik het zo zie dan zou ik denken dat je gewoon verder moet opschalen.

[Soultaker]

@Wolfboy: toch zijn de randjes in de oorspronkelijke post van de TS ongeveer net zo lelijk, dus het lijkt er op dat 'ie het ongeveer zo wil hebben...

Overigens kun je natuurlijk ook overwegen om niet te beginnen met een rechthoek en die roteren, maar een gedraaide rechthoek (witte vulling, zwarte buitenkant) met aliasing te tekenen, en daar het geroteerde plaatje weer in tekenen. Dan zullen in ieder geval je lijntjes er netjes uitzien (hoewel je dan nog steeds imageantialias aan wil zetten).

[kwaakvaak_v2]

[message=,noline]Sgreehder schreef op vrijdag 30 juli 2010 @ 13:41[/message]:
Leuk voorbeeld. Die parameters neem ik wel even over, ook voor de thumbnails zelf zal een beetje willekeurige variatie (heel licht draaien, zonder dat het storend wordt) misschien ook erg leuk worden. Ik moet eerst even door de download en install van Xcode heen, daarna met ApplePorts een ImageMagick erop knikkeren en kijken of MAMP ook nog wil meewerken. Hihi, relaxed ontwikkelen op OS X als je even van het bekende pad af moet ;-)

kijk eens naar het macports project, daar zit volgens mij een precompiled binary in van imagemagick

[Sgreehder]

Ja, MacPorts, ApplePorts, ik was even in de war. Het zijn juist die versies die problemen veroorzaakt, ik dacht eerst een mismatch tussen architecturen, maar ik blijf tegen dezelfde bug aanlopen met freetype. Maar goed, wat ik zeg, als ik uren in die terminal moet gaan wroeten, ga ik wel Linux draaien.