Avatar billede mstorgaard Praktikant
25. oktober 2006 - 16:08 Der er 19 kommentarer og
2 løsninger

Skære kanterne af et billede

Jeg vil gerne have lavet noget kode, som kan skære overflødige kanter af mine billeder.
Dette skal forstås således at jeg resizer et billede, så den mindste længdes (længde/bredde) antal pixels bliver kopieret over til den anden længde, så den cutter alt det uden for disse antal pixels på den længste længde.

Eksempel:
http://img63.imageshack.us/img63/373/testvh8.jpg
Her kan den se Længde A, og skærer hermed C og D væk i forhold til Længde B.

Er det muligt at lave? Og hvis det er, hvordan?

150 point til en løsning
Avatar billede mapoulsen Nybegynder
25. oktober 2006 - 20:42 #1
Jeg tror umiddelbart at det er nemmere at lave serverside fremfor hos klienten.

Det kan nok godt laves via noget snedigt/avanceret CSS og evt. lidt JavaScript, men det kræver jo stadig at hele billedet bliver loadet for derefter at overdække dele af det.

Ja, hvis det var mig havde jeg lavet det i PHP, ASP eller noget anden serverside.

Men: Er der nogen af størrelserne der er kendte? Startstørrelsen eller den ønskede slutstørrelse?
Avatar billede mstorgaard Praktikant
25. oktober 2006 - 21:32 #2
Den ønskede slutstørrelse skal være 176x176px.
Avatar billede mapoulsen Nybegynder
25. oktober 2006 - 21:47 #3
Og hvordan ser startstørrelsen så ud?
Avatar billede mstorgaard Praktikant
25. oktober 2006 - 21:58 #4
Det vil være forskelligt fra billede til billede..
Avatar billede mapoulsen Nybegynder
25. oktober 2006 - 22:01 #5
Højden vil altså ikke altid være 176 px?
Avatar billede mstorgaard Praktikant
25. oktober 2006 - 22:08 #6
Nej ikke altid, det vil sandsynligvis også være bredden der er 176..
Avatar billede mapoulsen Nybegynder
25. oktober 2006 - 22:17 #7
Men én af siderne vil altid være 176 px på startbilledet?
Avatar billede mstorgaard Praktikant
25. oktober 2006 - 22:42 #8
Nej, jeg troede du snakkede om slutbilledet.

Startbilledet:
- width: *px
- height: *px

Slutbilledet:
- width: 176px
- height: 176px
Avatar billede mapoulsen Nybegynder
25. oktober 2006 - 22:58 #9
Så syntes jeg helt sikkert at du skal gøre det via serverside scripting. Ellers vil du jo både nedskallere og skærer i et billede på klientens side. Det giver ikke mening i mine øre.

Men det skal nok kunne lade sig gøre, men bestemt ikke med ren css. En eller anden scripting skal der til. Om det så er på serverens eller klientens side.

Så svaret er: Nej, det kan ikke laves i CSS. I hvert fald ikke alene.
Avatar billede mstorgaard Praktikant
25. oktober 2006 - 23:22 #10
Jamen så lukker jeg af her, og vil overveje hvordan jeg vil opbygge det.
Avatar billede mstorgaard Praktikant
25. oktober 2006 - 23:22 #11
Svar
Avatar billede olebole Juniormester
26. oktober 2006 - 14:48 #12
<ole>

Jo, det kan sagtens gøres med CSS, alene:

<div style="position:absolute;clip:rect(10px 80px 80px 10px);overflow:hidden">
    <img src="http://www.eksperten.dk/img/elogo.png">
</div>

- og du kan jo blot resize billdet med CSS (sætte width og height). Om det så er bedst at gøre det på serveren eller på klienten, kommer anpå til hvad det skal bruges ... men det er under alle omstændigheder lettest/hurtigst at gøre det med ren CSS  :)

/mvh
</bole>
Avatar billede olebole Juniormester
26. oktober 2006 - 14:48 #13
- og værdierne for clip er:
    clip: rect(top right bottom left)
Avatar billede mapoulsen Nybegynder
26. oktober 2006 - 15:09 #14
Ja, det er jo lige det. Der skal et eller ande script til at udregne den nye bredde/højde. Så det er jo ikke alene vha. CSS.
Avatar billede olebole Juniormester
26. oktober 2006 - 15:17 #15
Ja, det er klart ... hvis størrelsen af billedet/clip'et skal være dynamisk, skal det beregnes via et lille script - men det er ikke nødvendigvis et must at tvinge en i forvejen overbebyrdet server til at beskære et hav af billeder on-the-fly (hvilket er en ret 'grådig' proces). Det kommer anpå, hvad det skal bruges til og hvordan  ;o)
Avatar billede mstorgaard Praktikant
26. oktober 2006 - 15:18 #16
Jamen så siger jeg tak for hjælpen.

Hent dine point her http://www.eksperten.dk/spm/740994
Avatar billede mapoulsen Nybegynder
26. oktober 2006 - 15:29 #17
Det er jeg nu ikke helt enig i. Stort set alle mine billeder på de sitets jeg laver bliver automatisk resizet, beskåret m.m. serverside. Det er blot et spørgsmål om at cache resultatet.

Så syntes jeg det er vigtigere at det går hurtigt og smertefrit for brugeren.
Avatar billede olebole Juniormester
26. oktober 2006 - 15:49 #18
- hvorfor han skrev: "Det kommer anpå, hvad det skal bruges til og hvordan"  ;o)

Udfra det, vi ved, kan man ikke vide, om den næste bruger skal have serveret de samme billeder i samme størrelse/beskæring - eller om der evt. er tale om 'delresultater' i en billedbehandlings applikation.
Derfor er det ikke sikkert, caching er aktuelt - og i det tilfælde kunne en klient-løsning absolut være en fornuftig option ... det kommer anpå, hvad det skal bruges til og hvordan  =)
Avatar billede mapoulsen Nybegynder
26. oktober 2006 - 15:53 #19
Ja, okey, ganske rigtigt. Men så er det jo heller ikke "under alle omstændigheder lettest/hurtigst at gøre det med ren CSS" :)
Avatar billede olebole Juniormester
26. oktober 2006 - 16:04 #20
Jamen, så lad mig omformulere det til: Det slider under alle omstændigheder mindre på serverens resourcer at gøre det klient-side  =)
Avatar billede mapoulsen Nybegynder
26. oktober 2006 - 16:08 #21
Jeps, det er rigtig nok. Men så slider der jo til gengæld bare på klientens ressourcer.

Men ja, løsningen afhænger meget af hvad det skal bruges til.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester