[JS/PHP?] plaatje resizen

[Verwijderd]

hallow

ik heb op mijn forum er soms last van dat plaatjes te breed zijn en dan wordt de hele layout verneukt, en dat vind ik niet liev ik wil dat de hoogte en breedte van een plaatje met de goede verhoudingen worden veranderd zodat ze max 540 pixels breed zijn.

ik heb even gezocht en gevonden dat je met javascript de grootte van een plaatje kunt opvragen. maar ik zou niet weten hoe ik dan daadwerkelijk zorg dat dat plaatje kleiner wordt afgebeeld ben beetje een javascript lamer

als er dus een plaatje van 1080 bij 400 is moet hij bij de client op 540 bij 200 worden weergegeven.

kan iemand mij helpen? ik ben zielig enzow

[DJSmiley]

Op dinsdag 25 juni 2002 20:04 schreef Baz_ het volgende:
hallow

ik heb op mijn forum er soms last van dat plaatjes te breed zijn en dan wordt de hele layout verneukt, en dat vind ik niet liev ik wil dat de hoogte en breedte van een plaatje met de goede verhoudingen worden veranderd zodat ze max 540 pixels breed zijn.

ik heb even gezocht en gevonden dat je met javascript de grootte van een plaatje kunt opvragen. maar ik zou niet weten hoe ik dan daadwerkelijk zorg dat dat plaatje kleiner wordt afgebeeld ben beetje een javascript lamer

als er dus een plaatje van 1080 bij 400 is moet hij bij de client op 540 bij 200 worden weergegeven.

kan iemand mij helpen? ik ben zielig enzow

Uh.. client-side of server-side?

Server-side bespaart je bandbreedte, door pic te tonen op resolutie die ie max mag zijn. (Verkleint dus)

client-side.. dan haalt de client dus het hele grote plaatje op, (veel bytes) en verkleint het als eindresultaat.

In het geval dat de plaatjes extern zijn is het voor jezelf dus het voordeligst om het client-side te doen, anders ga je je host een enorme hoop traffic laten genereren.

Vergroten/resizen in PHP zijn complete scripts voor, www.phpfreakz.nl oa.
Javascript zal je wel kunnen vinden op www.hotscripts.com

[Verwijderd]

inderdaad, egoistisch gezien leek client side me inderdaad het beste. hoewel het met php wel makkelijker te doen is (volgens mij). tnx voor de link, ik ga even kijken

[gorgi_19]

Kan je dit niet gewoon een heel stuk in HTML oplossen, door middel van [img]"blaat"[/img] ?

[Verwijderd]

nee, want het plaatje kan ook 500 pixels hoog zijn, dus als de horiz size 70% moet worden moet de vert size dat ook worden... snapje? het gaat om plaatjes die mensen hebben geupload en die vaak te groot zijn, en dat ze in de juiste verhouding worden verkleind

[Verwijderd]

op hotscripts kan ik niet echt iets vinden

[DJSmiley]

Op dinsdag 25 juni 2002 20:28 schreef Baz_ het volgende:
op hotscripts kan ik niet echt iets vinden

't is dat ik er ff geen zin in heb, maar simpel gezien kan je toch zoiets proggen?

if picbreedte<500 then plaats pic: einde
else
plaats pic width 500 height ((500/origheight)*orighoogte)
end

Edit: di's dus een of ander gedachtenkronkeltje van me, zelf ff omzetten in een echte taal


Pics kleinder dan 500 breed worden gewoon geplaatst
grotere pics worden geresized naar 500 breed, hoogte wordt uitgerekend (om verhouding goed te houden)

meot je 't alleen nog ff javascripten.. echt resizen van pic kan niet, dan moet je php oid gebruiken (Server-side) maar een IMG tag voorzien van de juiste waarden moet wel lukken..

Serverside raad ik je beetje af,
plaatje bv 60k... -> server.. resize -> client.

kost je dus al 120Kb traffic.. keer veel views (forum) keer veel pics = probleem met je hoster denk ik

[Verwijderd]

Maar als het JS dreigt te gaan worden (zoals ik denk dat de beste oplossing is) moet het naar de buren hè? /13

[Verwijderd]

idd djsmiley, zoiets wil ik maken, maar ik ben dus een lamer die niet kan javascripten maar toegegeven ik moet het toch proberen. dat ben ik nu dus aan het doen, wat nog niet helemaal lekker wil, maar het gaat vast wel lukken tnx iig

enne move maar naar de buren als dat moet hoor

[_.Luke._]

Als ik het goed begreek wil je dus je plaatje resizen terwijl het eigenlijk niet uitmaakt of het nu client of serverside gerealiseerd wordt...
Dan zeg ik gebruik de gdlib van PHP kan je iemand een plaatje laten submitten, deze grootte ovragen en eventueel bijstellen tot een maximaal aantal pixels...

Da is (met PHP) echt niet zo moeilijk.. ik denk zelfs dat er wel meerdere turorials zijn die het compleet bespreken... en anders kan je natuurlijk altijd hier terecht

[DRvDijk]

Wat ie wil (hé baz, ik spreek namens jou ), is dat de client het plaatje download, kijkt of ie te breed is (breder dan 540px), en zo ja, in de <img> tag proportioneel de width & de heigth aanpassen zodat de width dus maximaal 540 px is._{Wow, da's 1 zin}

[_.Luke._]

Nou ... als je de dimmensies van de afbeelding uitleest kun je toch aan de hand daarvan je <IMG> tag samenstellen...

PHP:

<?$grootte = GetImageSize($file); echo $grootte[3];//beideecho $grootte[0];//breedteecho $grootte[1];//hoogte?>

en dan ff vergelijken of de breedte of hoogte te groot is... daarna als breedte te groot is doe je

PHP:

<?$breedte = $grootte[0] - whatever;echo "<IMG width=\"$breedte\">";?>

als ik het nu nog verkeerd begrijp geef ik het op

edit: verkeerde []'s

[DRvDijk]

Dat is serverside... En dus moet de server eerst het plaatje downloaden, daar de sizes van opslaan, en html aan de client geven. Da's dus onzin Het trekt veeeel te veel bandbreedte.. Dit moet clientside gebeuren, en dus waarschijnlijk middels javascript

[_.Luke._]

Als het plaatje op de server staat...
en de server de dimmensies berekend deze IMB tag daarna uitspuugt zie ik niet waarom dit veel bandbreedte vreet...?

[flat]

maar de plaatjes staan niet op de server zelf...

[DRvDijk]

Op woensdag 26 juni 2002 11:30 schreef Flat© het volgende:
maar de plaatjes staan niet op de server zelf...

*applaus* [*img]http://blabla.com/duss.jpg[/img] wordt vervangen door een <img> tag.. Alleen zijn díé plaatjes regelmatig te groot dus...

[_.Luke._]

ah... eindelijk duidelijk...

sorry tis woensdag... nooit mijn hoogtepunt van de week

euh.... maar dat wordt nadenken...:(

[_.Luke._]

Volgens mij kan je niet de dimmensies van een URL uitlezen... pas als je het plaatje zelf hebt kun je volgens mij de dimmensies uitlezen en omdat je geen datatraffic wilt wordt het volgens mij lastig...:(

[Crazy D]

Met GetImageSize kun je ook van een url naar een plaatje de size uitlezen, dus met een beetje hobbyen moet je daar wel wat voor kunnen verzinnen om dat te kunnen gebruiken.

[edit] en een "leuk" geintje is dat je dan meteen kan checken of de image nog bestaat en zo niet, iets anders tonen...

[_.Luke._]

En dan haalt ie um dus niet eerst naar je server toe???... das best koel!

[flat]

Op woensdag 26 juni 2002 12:53 schreef _.Luke._ het volgende:
En dan haalt ie um dus niet eerst naar je server toe???... das best koel!

volgens mij wel hoor, hoe kan je anders de grootte bepalen?
maar als 't zo is, zal 't ongetwijfeld in de php-manual staan: www.php.net/GetImageSize

[_.Luke._]

<?php
$size = getimagesize ("http://localhost/logo.gif");
echo $size;
?>

dit vond mijn server niet echt leuk plaatje bestond nl niet...
Ik kan wel de grootte van een wel bestaand plaatje opvragen maar is me eerlijk gezegd nog niet helemaal duidelijk of ie nu WEL of niet helemaal wordt binnen gehaald of dat ie misschien alleen naar de Header van de afbeelding kijkt...

Kortom....
JS kan waarschijnlijk niet...
Met PHP = waarschijnlijk een boel datatraffic...

RFC

[DJSmiley]

Mogelijke andere optie:
Iemand post een reply.
Server kijkt naar de maten van het plaatje, en slaat deze maten op in een database oid.

Volgende keer opvragen worden de maten opgehaald uit de database, waarna het in een IMG tag eruit gepleurd wordt.

Kost je dus 1x dataverkeer, da's namelijk om plaatje te indexeren en in database te zetten.
Alle andere views worden dus uit database gehaald, traffic komt vanaf de host van plaatje, en jij gooit alleen wat html eruit

[DRvDijk]

Wat dus het idee was is dat dit hele verhaal client side gebeurd... Dus dat de client het plaatje downt, de browser checkt hoe groot ie is etc... Nix met de server.. We hebben al zo'n lage quota.. Plaatje downen als iemand post is ook geen goed idee, dat kost gewoon ook teveel verkeer

Dus di's echt een javascript topic denk ik..

[D2k]

starter: wat wordt het JS of PHP?
als het JS is gaat ie over de schutting naar [forum=13]

[Crazy D]

Op woensdag 26 juni 2002 12:55 schreef Flat© het volgende:
volgens mij wel hoor, hoe kan je anders de grootte bepalen?
maar als 't zo is, zal 't ongetwijfeld in de php-manual staan: www.php.net/GetImageSize

Zou ie niet alleen de header ophalen? (dan ga ik voor het gemak er maar even vanuit dat in de header ook het formaat staat ). Anders heeft het idd geen enkele zin (iemand zin om het te gaan monitoren? ).

Mjah als dataverkeer een big issue is kom je wel op javascript uit. Misschien kun je een <img tag een id geven, en dan in javascript de width en height opvragen mjah dat weten de buurtjes in /13 een stuk beter.

[_.Luke._]

Alleen gaat dat volgens mij niet met JS als je het plaatje niet fysiek hebt....

[ET]

Op woensdag 26 juni 2002 14:14 schreef _.Luke._ het volgende:
Alleen gaat dat volgens mij niet met JS als je het plaatje niet fysiek hebt....

Als je het plaatje niet hebt, kun je hem ook niet laten zien en dat is aan de client kant toch wel belangrijk (alhoewel, als je het plaatje niet hebt, kan hij de layout ook niet verneuken, van een kruisje afgezien).

[_.Luke._]

Je kan toch gewoon de link van een andere pagina gebuiken om een plaatje te laten zien vreet ook geen datatraffic van je eigen server...!!!

[Soultaker]

Het makkelijkst lijkt me het gebruik van PHP en GetImageSize.

Als het plaatje ofwel de maximale hoogte ofwel de maximale breedte overschrijft, bereken je de juiste grootte (rekeninghoudend met het perspectief, natuurlijk) en geef je die hoogte en breedte mee in je image tag. Het daadwerkelijke resizen mag (en moet, volgens de HTML specificatie) je browser dan doen.

Server side resizen KAN wel, maar is nogal 'duur' voor iets wat de client ook heel goed zelf kan (al zal 'ie dan waarschijnlijk geen bicubic resample doen, maar toch.)

[Soultaker]

Op woensdag 26 juni 2002 14:10 schreef Crazy_D het volgende:
Zou ie niet alleen de header ophalen? (dan ga ik voor het gemak er maar even vanuit dat in de header ook het formaat staat ).

Helaas, dat is niet zo. JavaScript is dan dus de meest geschikte oplossing; eigenlijk werkt dat hetzelfde als op de server. JavaScript is sowieso niet zo'n slechte keuze, aangezien het jou als server niet zoveel uitmaakt of de lay-out van de client verneukt wordt of niet.

[Crazy D]

Op woensdag 26 juni 2002 14:48 schreef Soultaker het volgende:
Helaas, dat is niet zo. JavaScript is dan dus de meest geschikte oplossing; eigenlijk werkt dat hetzelfde als op de server. JavaScript is sowieso niet zo'n slechte keuze, aangezien het jou als server niet zoveel uitmaakt of de lay-out van de client verneukt wordt of niet.

De server zal het ook een worst wezen, alleen Baz_ kan het wel wat schelen

Op dinsdag 25 juni 2002 20:04 schreef Baz_ het volgende:
ik heb op mijn forum er soms last van dat plaatjes te breed zijn en dan wordt de hele layout verneukt, en dat vind ik niet liev

Ik vraag me alleen af of je dat op een normale manier kunt doen in javascript. De plaatjes zullen sowieso eerst helemaal geladen moeten worden, dus kun je imho pas in de body onLoad event de plaatjes doorlopen, maar als je ze dan gaan 'resizen' verspringt de layout helemaal (als het al werkt).

[drm]

code:

for ( a in document.images )
{
   if(document.images[a].width > 540)
   {
    ratio = 540/document.images[a].width;
    document.images[a].width=540;
    document.images[a].height = document.images[a].height * ratio;
   }
}

zoiets

[_.Luke._]

HEy das volgens mij niet eens zo'n slecht idee...

maak er een functie van en roep die bij onload() aan...
Dan ziet je lay-out er nog wel een tijdje brak uit...totdat de pagina helemaal geladen is...

[DRvDijk]

Ja zoiets ja Kan goed.. tellertje voor de images.. Dáárvoor is dus die ID-tag Hee.. da's leuk.. Ik dénk dat ik Baz_ maar es ga wakker bellen
_{D2k: Skup maar over het schuttinkje}

[Verwijderd]

Op woensdag 26 juni 2002 15:12 schreef drm het volgende:
[ code.. ]


zoiets

ehm...alleen maakt deze ook al je plaatjes in e design kleiner he

Dus kun je beter in je image tag deze functie aanroepen met een getid functie als argument (welke was dat ook alweer? )

[drm]

Trebel:
ehm...alleen maakt deze ook al je plaatjes in e design kleiner he

ik heb nog nooit een plaatje van >540 breed in een design gehad...

[_.Luke._]

ik wel...

mijn backgroundimage

[drm]

_.Luke._:
ik wel...

mijn backgroundimage

die staat niet in de images collection.

[Verwijderd]

Op donderdag 27 juni 2002 11:19 schreef drm het volgende:

[..]

ik heb nog nooit een plaatje van >540 breed in een design gehad...

Nee maar als je een wat smaller design hebt (zoals ik, waarbij een plaatje in de text naar mijn mening niet breder mag zijn dan 250 a 300) kan het wel een probleem zijn.

[Crazy D]

Ik neem aan dat je de id kunt uitlezen in een loopje (in javascript dus), dus kun je bv enkel de images zonder ID resizen (? "lijkt me", weet het niet zeker).

[drm]

Trebel:
Nee maar als je een wat smaller design hebt (zoals ik, waarbij een plaatje in de text naar mijn mening niet breder mag zijn dan 250 a 300) kan het wel een probleem zijn.

Ik zou het dan met een class aangeven, of hij wel of niet geresized moet worden.

* drm zou het sowieso liever in PHP doen.

Als het om geplaatste plaatjes gaat, (forum ofzo) doe je het meestal toch met een regex, en dan heb je sowieso de url al ter beschikking.

code:

function makeImg ( $url )
{
   // ...
   list ( $width, $height ) = GetImageSize ( $url );
   if ( $width > 540 )
   {
    $ratio = 540 / $width;
    $width *= $ratio;
    $height *= $ratio;
   }
   return "[img]\"$url\"[/img]";
}

[DRvDijk]

PHP is lief en sagt JavaScript inderdáád minder in deze situatie, maar aagezien het niet de server moet zijn die bij elke opvraag van een thread de plaatjes download (die dus in die thread staan), maar de client..

[Soultaker]

Als het inderdaad om een forum gaat, is het natuurlijk niet zo moeilijk om bij het toevoegen van een plaatje één keer het plaatje op te halen (kun je gelijk checken of 't een geldige URL is enzo) en de grootte gelijk in de img-tag opslaan.

Dan zijn alle problemen met reformatten van de browser en dergelijke in één klap opgelost en hoeft de server elk plaatje slechts eenmaal in te laden.