Gå til innhold

Lage et enkelt opplasningsscript for bilder?

834HF42F242

Anbefalte innlegg

834HF42F242

834HF42F242

Skrevet
Skrevet (endret)

Ønskescript:

 

Knapp som åpner nytt vindu

Vindu:

Opplastningsknapp hvor man kan velge bilde fra lokal disk til "http://domene.com/bilde/*.*

Script som laster opp bildet

Script som henter ut bredde og høyde fra bilde

Script som regner ut følgende:

intNewWidth = 320

intNewHeight = oldWidth / 320 * oldHeight

Streng blir sendt til textfield i aktuell form i foreldrevindu:

/bilde/*.*&hight=intNewHeight&width=intNewWidth

Endret av neitakk
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
834HF42F242

834HF42F242

Skrevet
  • Forfatter
Skrevet

Jeg er temmelig sikker på at man ved hjelp av javascript kan hente ut bredde og høyde på bildet. Poenget er at dette må regnes ut på klientens maskin, og ikke serverside. Derfor javascript.

Selve boksen som åpnes kan jo selvsagt være et nytt HTML-vindu, og det er fint mulig å sende en streng tilbake til foreldrevindu når man lukker det. Alt dette får jeg til, men jeg behersker ikke javascript.

Lenke til kommentar
LostOblivion

LostOblivion

Skrevet
Skrevet
Ønskescript:

 

Knapp som åpner nytt vindu

Vindu:

  Opplastningsknapp hvor man kan velge bilde fra lokal disk til "http://domene.com/bilde/*.*

  Script som laster opp bildet

    Script som henter ut bredde og høyde fra bilde

    Script som regner ut følgende:

      intNewWidth = 320

      intNewHeight = oldWidth / 320 * oldHeight

Streng blir sendt til textfield i aktuell form i foreldrevindu:

/bilde/*.*&hight=intNewHeight&width=intNewWidth

8792090[/snapback]

 

Du vil altså ha en funksjon som finner størrelsen på et bilde? Jeg vil tro du finner svaret i lenken under. Fant jeg med 30 sekunders Google søk... :roll:

 

http://www.webreference.com/programming/ja...ipt/gr/column8/

Lenke til kommentar
LostOblivion

LostOblivion

Skrevet
Skrevet (endret)

Lagde et fungerende script. Det ser kanskje mer avansert ut enn det egentlig er. Grunnen til det, er at bildet må lastes inn i nettleseren før samme kan hente informasjon om bildet.

 

Klikk for å se/fjerne innholdet nedenfor

<html>

<head>
<title>
Display Image Size
</title>
<script>
var imgObj; // så alle funksjonene jobber med samme objekt
function makeImg()
{
// lage bildeobjektet
imgSrc = document.getElementById("imgSrc").value; // input fra HTML (se under)
imgObj = new Image();
imgObj.src = imgSrc;
loadImg();
}
function loadImg()
{
// venter bare på at bildet er lastet inn
if (!imgObj.complete)
 setTimeout("loadImg()", 20);
else
 displayImgSize();
}
function displayImgSize()
{
// bilde ferdig lastet inn, hent bildestørrelse
newWidth = 320;
newHeight = parseInt((newWidth / imgObj.width) * imgObj.height);
alert("Width: " + imgObj.width + "px, Height: " + imgObj.height + "px");
alert("New Width: " + newWidth + "px, New Height: " + newHeight + "px");
}
</script>
</head>

<body>
<input id="imgSrc" type="text" />
<input type="button" value="Display Image Size" onclick="makeImg();" />
</body>

</html>

 

Hvis du skal ha thumbs, blir vel formelen nyHøyde = (nyBredde / gammelBredde) * gammelHøyde hvis du skal ha samme forhold mellom bredde og høyde og du har gitt den nye bredden på bildet. :)

 

Du kan også lage et nytt bildeobjekt med ny bredde/høyde sånn her og bruke det/vise det.

 

newWidth = 320;
newHeight = parseInt((newWidth / imgObj.width) * imgObj.height)
newImgObj = new Image(newWidth, newHeight);
newImgObj.src = [bildeKilde];

 

Husk at denne også må bli ferdig med å lastes inn i nettleseren før samme kan vise den. (Med mindre du bare lar brukeren vente til bildet er lastet i nettleseren etter du har brukt bildeobjektet...) :thumbup:

 

Håper dette hjelper! :)

 

(Har muntlig eksamen på onsdag, så det gikk litt raskt...) :p

Endret av LostOblivion
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...