[LØST] skaler ned et bilde via CSS

[ThorB]

Hei.

Dette er ikke et spørsmål, egentlig bare en diskusjon om tanker rundt nedskaleringsemnet.

 

Jeg driver for øyeblikket og sysler med et webbasert admingrensesnitt.

Der er det muligheter for opplastning av bilder.

Problemet er selfølgelig at bildet som brukeren laster opp kan være større enn jeg vil at disse skal forhåndsvises i admingrensesnittet. la oss si at jeg har en tabell, der man har en liste med 5 bilder. det er plass til et bilde på max 200piksler i kolonnen (både i bredde og høyde). det er forskjellige måter å løse det på.

f.eks

1. når bruker laster opp bildet, leses width og height i php, lagres i databasen, og neste gang vi skal vise dette bildet kan vi reklalkulere bredde og høyde for max 200piksler (denne metoden har jeg testet, og den fungerer utmerket)

fordel:

* fungerer i alle nettlesere

* slipper å bruke prosessorkraft for å generere thumbnails

* nettleser uavhengig

* enkelt å manipulere via javascript

ulempe:

* ekstra båndbredde, men ikke nødvendigvis et problem. spørs hvordan man implementerer dette. f.eks hvis dette gjelder kun en admin-side, så er den ekstra båndbredden som brukes uviktig i den store sammenheng.

* bildene kan ta lang tid å laste hvis bruker sitter på dårlig linje

 

2. vi får php til å generere en thumbnail on the fly, når vi skal se bildene

fordel:

* lavere båndbreddebruk

* raskere innlastning av bildet med tanke på båndbredde

* nettleser uavhengig

ulempe:

* unødvendig cpukraft for å generere thumbnails

 

3. resize ved å bruke css.

fordel:

* enkelt

* lite kode for å oppnå effekten

* enkelt å manipulere via javascript

ulempe:

* ikke helt nettleser uavhengig (krever css v2)

 

laget en liten test på å skalere ned et bilde

http://home.no.net/thor918/layout/resizeimage/

 

I Opera og IE7, skaleres bildet med hensyn til proporsjoner... men i firefox ble det litt feil.

Litt overaskende egentlig, siden max verdiene ikke fungere i IE7 på en tabell.

 

http://forum.textpattern.com/viewtopic.php?id=23847

I følge linken over er det ikke anbefalt å ta i bruk max-width eller max-height...

grunnet den dårlige nettleserstøtten i eldre og nyere nettlesere.

Og etter mine tester trur jeg skal være enig i det.

 

Hvilken løsning benytter du deg av?

Endret 21. desember 2007 av thor918

[mikk-]

En annen løsning er å lagre thumbnail på serveren. Da bruker du litt CPU-kraft, men bare én gang. Den største ulempen kommer kanskje hvis du har begrenset tilgang på RAM.

 

I utgangspunktet er jeg tilhenger av å ikke være avhengig av prosesser på klienten, så langt det er mulig. Siden bør være mulig å vise også uten CSS og JavaScript. Om brukeren blir nødt til å laste ned flere bilder på kanskje flere MB hver, er dette en ulempe. Hvis du har ressurser til det på serveren, ville jeg gått for lagring av thumbnails på server.

[ThorB]

En annen løsning er å lagre thumbnail på serveren. Da bruker du litt CPU-kraft, men bare én gang. Den største ulempen kommer kanskje hvis du har begrenset tilgang på RAM.

 

I utgangspunktet er jeg tilhenger av å ikke være avhengig av prosesser på klienten, så langt det er mulig. Siden bør være mulig å vise også uten CSS og JavaScript. Om brukeren blir nødt til å laste ned flere bilder på kanskje flere MB hver, er dette en ulempe. Hvis du har ressurser til det på serveren, ville jeg gått for lagring av thumbnails på server.

ja stemmer. det alternativet kan man også vurdere

hvis jeg tar i bruk den metoden vil jeg at alt skal være lagret på mysql server.

så lenge man har god plass der så skulle det vel gå bra.

det andre er at man må ha noe i php som åpner bildeformatet og greier å lage til en forminsket utgave av bildet.

 

For php, ser ut som resizing er innebygd i php4 og php5.

http://no.php.net/manual/en/function.imagecopyresampled.php

 

Har brukt denne klassen engang, som bruker den innebygde funksjonen nevnt over.

http://www.gen-x-design.com/projects/php-thumbnailer-class/

 

eneste jeg kan sette fingern på er at det virker noe ressurskrevende å resize i PHP. noe tregt med andre ord.

å minnebruken til PHP scriptet må som regel utvides.

 

spørs om kanskje man må bruke GD-funksjonen for å få en raskere resizing, men da gjør man seg plutselig avhenig av noe som kanskje ikke er med i noen av PHP installasjonen.

ser det er noen gulltips i tråden:

http://no.php.net/manual/en/function.imagecopyresampled.php

så kanskje det går an å få det litt raskere til en den klassen jeg brukte.

 

edit:

ser ut som jeg har tatt litt feil..

den funksjonen jeg nevnte er en del av GD

http://no.php.net/gd

Endret 18. desember 2007 av thor918

[BlueEAGLE]

Jeg mener at det beste er å generere et forhåndsvisningsbilde (thumbnail om du vil) når brukeren laster opp bildet og lagre dette sammen med det originale bildet.

 

Hvis jeg ikke har misforstått så briker GD og ImageMagik libjpeg til å manipulere jpeg-bilder. Dette er ikke mer krevende enn det må være. Hadde du skulle endret størrelsen kun i php (uten GD/libjpeg) så hadde jeg hatt forståelse for at bekymret deg for prosessorkraften.

 

Den prosessorkraften du bruker til å generere forhåndsvisningsbildet vinner du lett tilbake når du kan lese inn det genererte forhåndsvisningsbildet istedenfor å måtte sende hele bildet til klienten. Samtidig så vil det faktum at du overfører mindre data til klienten få tabellen til å laste inn mye raskere.

[ThorB]

Jeg mener at det beste er å generere et forhåndsvisningsbilde (thumbnail om du vil) når brukeren laster opp bildet og lagre dette sammen med det originale bildet.

 

Hvis jeg ikke har misforstått så briker GD og ImageMagik libjpeg til å manipulere jpeg-bilder. Dette er ikke mer krevende enn det må være. Hadde du skulle endret størrelsen kun i php (uten GD/libjpeg) så hadde jeg hatt forståelse for at bekymret deg for prosessorkraften.

 

Den prosessorkraften du bruker til å generere forhåndsvisningsbildet vinner du lett tilbake når du kan lese inn det genererte forhåndsvisningsbildet istedenfor å måtte sende hele bildet til klienten. Samtidig så vil det faktum at du overfører mindre data til klienten få tabellen til å laste inn mye raskere.

ja, det virker som det er en av de gode måtene å gjøre det på.

Eneste er at det krever litt mere programmering for at det skal komme på plass.

 

leter etter den beste måten å skalere via PHP nå.

jeg har jo prøvd den klassen jeg linka til.

men tenkte jeg skulle forsøke å finne en litt enklere/raskere implementasjon:

http://pastebin.ca/raw/671908

den over ser ikke ut som den tar hensyn til proporsjonene til bildet, slik som den klassen gjorde...

men den benytter en skaleringsmetode som påståelig skal være rask. pluss at den velger automatisk mellom imagemagick og gd..

 

la oss si at jeg skalerer ned et bilde med riktige proporsjoner.

skaleringskoden skalerer ned slik at ikke høyden eller bredden blir større enn 100px.

det nye bildet får en størrelse på width=50px og height=100px..

for at bildene skal se like ut vil jeg ha en ramme rundt slik at hver thumbnail alltid blir 100px i høyde og bredde.

alternativ:

1. vil du bruke php for å kompansere de pikslene som mangler?

2. går det an å bruke css for å oppnå dette?

[BlueEAGLE]

Algoritmen er enkel.

 

a) les inn filen med imagecreatefromjpeg()

b) Finn bredden og høyden på bildet med imagesx() og imagesy()

c) Del den minste på den største (høyden/bredde=aspekt) eller (bredde/høyde=aspekt)

d) Sett den største til 200 og den minste til 200*aspekt i imagecopyresampled()

e) Skriv filen til disk med imagejpeg()

[mikk-]

Hvis du har et bilde som er 100*75 og skal vise det som 100*100, så kan du sette bildet i en "kvadratisk ramme" i CSS.

[ThorB]

Hvis du har et bilde som er 100*75 og skal vise det som 100*100, så kan du sette bildet i en "kvadratisk ramme" i CSS.

 

Takk

det var det jeg tenkte.

så da trur jeg det er like greit å gjøre den delen i css i stedenfor php.

[ThorB]

Algoritmen er enkel.

 

a) les inn filen med imagecreatefromjpeg()

b) Finn bredden og høyden på bildet med imagesx() og imagesy()

c) Del den minste på den største (høyden/bredde=aspekt) eller (bredde/høyde=aspekt)

d) Sett den største til 200 og den minste til 200*aspekt i imagecopyresampled()

e) Skriv filen til disk med imagejpeg()

nettopp.

har implementert en slik kode nå som lagrer thumb i databasen.

men man må nok ta hensyn til hvilket bildeformat som kommer inn på a)..

så da har jeg en switch mellom jpg, gif og png alt ettersom hva filtypen er.

 

det som er genialt med å lagre thumben, er at jeg kan velge at alle thumbsa lagres i sammeformat, det forenkler en del med tanke på mimetypen som må sendes til browseren for at bilde vises. så endte opp med bare 1 blob felt for thumb, i databasen.

 

mangler bare å lage en ramme rundt thumben ved å bruke CSS

[ThorB]

Hvis du har et bilde som er 100*75 og skal vise det som 100*100, så kan du sette bildet i en "kvadratisk ramme" i CSS.

 

Takk

det var det jeg tenkte.

så da trur jeg det er like greit å gjøre den delen i css i stedenfor php.

'Mikael Berg'

har du noe forslag om hvordan koden kan se ut?

tenker du en css som peker rett på et bilde, eller tenkte du en div pakket rundt bildet?

[mikk-]

<span class="bilderamme"><img src="bilde.jpg"></span>

 

.bilderamme {
display: block;
overflow: hidden;
width: 100px;
height: 100px;
background-color: #000;
}
.bilderamme img {
display: block;
margin: auto;
}

 

Vil ikke midtstille bildet vertikalt inni rammen. Er ikke helt sikker på hva som er beste måte å gjøre det.

[ThorB]

<span class="bilderamme"><img src="bilde.jpg"></span>

 

.bilderamme {
display: block;
overflow: hidden;
width: 100px;
height: 100px;
background-color: #000;
}
.bilderamme img {
display: block;
margin: auto;
}

 

Vil ikke midtstille bildet vertikalt inni rammen. Er ikke helt sikker på hva som er beste måte å gjøre det.

 

Dette så jo kjempebra ut!

 

men ikke helt perfekt i alle nettlesere dessverre:

http://home.no.net/thor918/layout/kvadratbilde/

 

IE7 = problemer med link på bildet... og mouspekertype over link (sistnevnte går greit å fikse)

Opera = alt ok

Firefox = clickområdet strekker seg over større område enn boksen

 

det firefoxproblemet trur jeg greide å finne frem noe på nå:

http://www.webmasterworld.com/css/3126713.htm

skal teste litt

Endret 19. desember 2007 av thor918

[ThorB]

Ok.

 

Noen småjusteringer.. sånn no funker linken bra

 

Tusen takk "Mikael Berg"

 

<style type="text/css">
<!--
.bilderamme {
display: block;
overflow: hidden;
width: 100px;
height: 100px;
background-color: #000;
}
.bilderamme img {
display: block;
margin: auto;
border: none;
}
-->
</style>
<a href="java script:alert('test');" class="bilderamme"><img src="view.png"></a><br />

[ThorB]

Vil ikke midtstille bildet vertikalt inni rammen. Er ikke helt sikker på hva som er beste måte å gjøre det.

 

ser ut som det har noe med at "vertical-align:middle;" ikke fungerer på block elementer.

http://www.ibloomstudios.com/articles/vertical-align_misuse/

 

http://www.student.oulu.fi/~laurirai/www/css/middle/

 

en fiks på verikal alignment:

vet ikke om det er en god metode da men den fungerer nå i firefox og opera, med fallback på ie

ifølge student.oulu.fi/laurira:

works in:

Opera 6.04, 7.51p1, 8b3; Mozilla 1.4.1; FF1; Konqueror 3.1.4-6; Safari 1.1.1

does not work in:

IE5.5; IE6; MacIE5;

 

<style type="text/css">
<!--
.bilderamme {
display: table-cell;
overflow: hidden;
width: 100px;
height: 100px;
background-color: #000;
vertical-align:middle;
}
.bilderamme img {
display: block;
margin: auto;
border: none;
}
-->
</style>
<!--[if IE]><style type="text/css">
.bilderamme {
display:block;
}
</style><![endif]-->
<a href="java script:alert('test');" class="bilderamme"><img src="view.png"></a><br />

 

en annen variant(dessverre ikke validert css):

<style type="text/css">
<!--
.bilderamme {
display: table-cell;
		display: expression('block'); /*IE only*/
overflow: hidden;
width: 100px;
height: 100px;
background-color: #000;
vertical-align:middle;
}
.bilderamme img {
display: block;
margin: auto;
border: none;
}
-->
</style>
<a href="java script:alert('test');" class="bilderamme"><img src="view.png"></a><br />

 

her er en kode som ligner.. kanskje dette er en bedre metode:

http://www.brunildo.org/test/img_center.html

Endret 19. desember 2007 av thor918

[ThorB]

ok.

etter å undersøkt på litt av hvert, fant jeg ut at jeg skal prøve å unngå løsninger som krever masse workaraounds på klientene.. så derfor ble løsningen til slutt ble å la php resize og centrere thumbsa..

så derfor er css kodene helt minimale, og ser helt like ut uansett nettleser.