[JS] opvragen oorspronkelijke afmetingen van plaatje

[js303]

hoi,
ik kan me herinneren dat ik ooit in een javascript-sourcecode gezien heb dat je van een afbeelding de oorspronkelijke afmetingen kan opvragen. dus stel in de HTML staat <img src='plaatje.gif' width='400' /> dat je dan kan traceren wat de oorspronkelijke breedte/hoogte was, iets in de orde van img.originalWidth / img.originalHeight.

ik heb msdn gecheckt, gegoogled, maar niks kunnen vinden. was het een hallucinatie van mij of bestaat er toch een functie voor?

ik kan natuurlijk altijd uitwijken naar php (getimagesize) maar het zou fijn zijn dit geheel clientside te kunnen oplossen.

[P.O. Box]

ik weet geen oplossing, maar ben wel benieuwd waarom het zo fijn zou zijn het clientside op te lossen?

[js303]

het is voor een CMS waarin beelden geplaatst kunnen worden, waarbij ook de afmetingen ingesteld kunnen worden. dan zou het handig zijn als de gebruiker ziet of er beelden in een pagina zitten die oorspronkelijk bijv. 1600x1200 zijn, maar op 320x240 getoond worden. kan serverside, maar in mijn specifieke geval is clientside fijner.

[BasieP]

image.width en image.height?

waarbij 'image' dus een 'img' node is

trouwens had je dit ook best kunnen opzoeken bij bijv. google

trouwens, als jij een image hebt van 300 pix, en je zet in html 'width=400' denk ik dat JS braaf de '300' uitpoept, en niet de '400'
ik raad je aan om het hele 'img=400' gebeuren niet te gebruiken. doe dit liever met css.
(die je weer kunt opvragen met image.style.width' enzo)

[ Voor 116% gewijzigd door BasieP op 17-04-2007 12:02 ]

[Verwijderd]

Je kunt proberen om een nieuw Image object te maken en dan de .src property van het plaatje uit de content te kopiëren naar de .src property van dat object. Het plaatje wordt dan sowieso uit de cache gehaald, dus geen extra laadtijd, en waarschijnlijk zijn de .width en .height property dan wel ingesteld. Zo niet, kun je het nieuwe object in de DOM tree hangen, zodat je de .offsetHeight en .offsetWidht uit kunt lezen. Maar ik gok zo dat dat laatste niet eens nodig is.
HTH

[P.O. Box]

js303 schreef op dinsdag 17 april 2007 @ 11:55:
het is voor een CMS waarin beelden geplaatst kunnen worden, waarbij ook de afmetingen ingesteld kunnen worden. dan zou het handig zijn als de gebruiker ziet of er beelden in een pagina zitten die oorspronkelijk bijv. 1600x1200 zijn, maar op 320x240 getoond worden. kan serverside, maar in mijn specifieke geval is clientside fijner.

ik ben dus benieuwd naar dat specifieke geval... kan namelijk zelf zo 1-2-3 geen specifiek geval bedenken

[RM-rf]

Verwijderd schreef op dinsdag 17 april 2007 @ 12:02:
Je kunt proberen om een nieuw Image object te maken en dan de .src property van het plaatje uit de content te kopiëren naar de .src property van dat object.

is het correcte antwoord imho.
de andere methode om van het bestaande plaatje al de widt/height of de offsetWidth/Height uit te lezen retourneert enkel de 'visuele' hoogte, dus de al geresizede...

door eenkel een new Image() aan te maken die niet afgebeeld wordt, heb je altijd de 'échte' breedte/hoogte.

[SuperRembo]

Gewoon even naar de scaleImage() functie kijken van GoT
Firefox kent naturalWidth en naturalHeight, anders gebruik je een dummy image waar je de width en height van op vraagt.

[js303]

@SuperRembo: DAT was'em naturalWidth, naturalHeight! nu weet ik ook waar ik die tegenkwam hihi (GOT dus) hmmm, Firefox only dus, OK duidelijk. gek, ik kwam hem niet op de mozilla reference tegen. of is dat niet gek?

@Cheatah / RM-rf: dat lijkt me inderdaad een oplossing voor non-firefox. ik ga deze dan ook maar gebruiken denk ik in combi met die GOT-functie.

@BasieP: width=300 is inderdaad niet zoals ik het doe, het was alleen ter illustratie (ok een slechte illustratie

@Edwardvb: het CMS heeft een js-based beeld-editor voor bijsnijden en scalen. ik wil met een onclick of mouseover een soort info/properties layer tonen waarin dus ook een indicatie wordt getoond of het beeld nog niet optimaal voor web is (bijv. een 1600x1200 beeldje). dat moet snel reageren, ik wil liever niet weer met de server connectie maken, en vtv de originele afmetingen op te vragen in php alvorens de pagina te renderen geeft ook weer 'hoofdpijn' maar daarmee zal ik jullie niet vervelen.