[Javascript] Plaatjes resizen - Softwareontwikkeling

vrijdag 7 december 2001 16:04

Acties:

Topicstarter

Ik heb al een tijd een probleem met het volgende script. Het werkt namelijk soms wel, en soms niet.

Het is de bedoeling dat een 'preview' wordt gegeven van het plaatje wat wordt geselecteerd met de filebrowser.

Deze preview moet op de client worden geresized, maar de hoogte / breedte verhoudingen van het plaatje moeten wel bewaard blijven.

Het script geeft soms wel gewoon het plaatje op juiste manier weer, maar soms met de verkeerde afmetingen (1 pixel hoog of/en breed)Het lijkt wel een bug van de browser, maar ik weet niet of dit zo is. Kan iemand me helpen?
alvast bedankt!

code:

<HTML>

<SCRIPT LANGUAGE="JavaScript">
 <!--
   
  // Even uitleggen wat hier gebeurt:
  // Eerst wordt een nieuw Image aangemaakt
  // Dan wordt aan de hand van de URL uit de file-textbox het picture object
  // gevuld. Van het picture-object worden vervolgens de afmetingen opgenomen.
  // Vervolgens worden de afmetingen aan de hand van MaxWidth of MaxHeight
  // ingesteld. Tenslotte wordt de afbeelding weergegeven.
 
  function changePicture(image_index, image_file, maxwidth, maxheight){
   
   picture = new Image(); 
   picture_url=document.logoform.elements[image_file].value;

   picture.src=picture_url;
   picture_width = picture.width;
   picture_height = picture.height;
   
   if (maxwidth>0){
     
     if(picture_width<maxwidth){
     document.images[image_index].width=picture_width;
     document.images[image_index].height=picture_height;
     } else {  
       document.images[image_index].width=maxwidth;
       document.images[image_index].height=(maxwidth/picture_width)*picture_height;
     }  
   } else {
     if(picture_height<maxheight){
       document.images[image_index].width=picture_width;
       document.images[image_index].height=picture_height;
     } else {  
         document.images[image_index].width=(maxheight/picture_height)*picture_width;
         document.images[image_index].height=maxheight;
       }  
     }  
   
   document.images[image_index].src=picture.src;
  
  } // changePicture
 
 //-->
</SCRIPT>
 
 
 <BODY>
 
  <FORM NAME=logoform>
 
  <TABLE BORDER=0>
    <TR>
     <TD VALIGN="top">Logo</TD>
     <TD VALIGN="top">:</TD>
     <TD VALIGN="top">[img]../images/spacer_gray.gif[/img]
    </TR> 
    <TR>
     <TD VALIGN=middle ALIGN=left>Filename</TD>
     <TD VALIGN=middle ALIGN=left>:</TD>
     <TD VALIGN=middle ALIGN=left><INPUT TYPE=file CLASS=text NAME=logofile ACCEPT="*.gif" onFocus="changePicture('logo_preview','logofile',0,90);" SIZE=33></TD>
    </TR>

  </TABLE>   
 
 </FORM>
 
 </BODY>
 
</HTML>

We need more cowbell

vrijdag 7 december 2001 16:22

Acties:

crisp

Devver

Pixelated

Waarschijnlijk is het probleem dat het plaatje nog niet volledig geladen is als je de width en height uitvraagt.
Maak een loopje waarin je picture.readyState=='complete' uitvraagt voordat je de width en height opvraagt.

Intentionally left blank

vrijdag 7 december 2001 16:35

Acties:

Toni

Topicstarter

Yo! Hartelijk bedankt, het werkt nu helemaal goed!

We need more cowbell

maandag 14 februari 2005 17:49

Acties:

Verwijderd

Sorry dat ik dit oude topic weer even te voorschijn haal, maar ik kom er na uren zoeken niet uit.

Moet een image resizen, doe ik met dit stukje JavaScript

code:

<script type="text/javascript">
var maxWidth = 440;
function scaleImage(im) {

if (im.width > maxWidth) {
im.orgwidth = im.width;
im.width = maxWidth;
im.onclick = unscaleImage;
}
}
</script>

Vervolgens het plaatje laden:

code:

1	[img]"<%=RS("grootplaatje")%>"[/img]

Soms werkt dit wel, soms niet. Nu las ik hier dat hij de afmetingen van het plaatje uit probeert te lezen voordat het plaatje binnen is. Ook staat er een paar posts boven deze, dat je dat d.m.v. een loopje kunt voorkomen. Ik heb echter totaal geen kaas gegeten van JavaScript, en ook een JavaScript boek en veel zoekwerk helpen niet.

Dus, wie kan me hier ff mee helpen? Het liefst het loopje ff integreren in bovenstaande code

maandag 14 februari 2005 20:21

Acties:

mocean

Maak een loopje waarin je picture.readyState=='complete' uitvraagt voordat je de width en height opvraagt.

Als je dit niet zelf in de functie kan krijgen, zou ik eerst gewoon Javascript gaan leren!

Koop of verkoop je webshop: ecquisition.com

dinsdag 15 februari 2005 09:14

Acties:

Pelle

🚴‍♂️

Scriptrequests doen we hier niet aan; zoek op google eens naar javascript tutorial ofzo