468,119 Members | 1,690 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,119 developers. It's quick & easy.

Zorn's DragDrop Library - swapImage() function query

I'm using the great dd.dragdrop Library for many parts of the page, including loading in a user selected image via the "swapImage()" function.

Expand|Select|Wrap|Line Numbers
  1. var imgRe = /^.+\.(jpg|jpeg|gif|png)$/i;
  3. function swapMe(pathField, previewName)
  4. {       
  5.     var path = pathField.value;
  6.     if (path.search(imgRe) != -1)
  7.     {   
  8.         dd.elements.replaceMe.swapImage('file://'+path) ;
  9.     }       
  10.     else    
  11.     {   
  12.         alert("JPG, PNG, and GIFs only!");
  13.     } 
  14. }
All works, but ...

The incoming image inherits the size and aspect ratio of the 'image' used to hold a place for it as required by the library.

<IMG Name="replaceMe" SRC="blank.gif" width="630" Height="730"><BR>

I have no control over the actual size of the user's image, although it will be within a moderate range of 630w x 730h.

Part of the use requires sizing to fit a measuring device. I would prefer to use SCALABLE, but because of the inheritance of the holder's height/width, the user has to H and V size independently with RESIZABLE.

Query: Is there an easy manner to get the incoming image to retain its aspect ratio - even IF it needs a greater/lesser SCALABLE adjustment?

Dec 28 '07 #1
11 1717
16,027 Expert Mod 8TB
Welcome to TSDN!

Preload the image and get its height and width and set replaceMe's properties to these:
Expand|Select|Wrap|Line Numbers
  1. var img = new Image();
  2. img.src = path;
  3. var width = img.width;
  4. var height = img.height;
Dec 29 '07 #2
Thank you, but this seems to fail loading the H&V values into the necessary "resizeTo()" function.

I'm using the dragdrop Library for swapping, scaling and moving the image. I can't seem to access the "replaceMe1" image's H&W directly, but need to use the Library's "resizeTo()" function. Hard numbers work;
dd.elements.replaceMe1.resizeTo(630, 730);
this script using variables doesn't!

Expand|Select|Wrap|Line Numbers
  1.         myPic = new Image();
  2.         myPic.src = path;
  3.         var myWidth =  myPic.width;
  4.         var myHeight = myPic.height;
  5.         dd.elements.replaceMe1.swapImage('file://'+path) ;
  6.         dd.elements.replaceMe1.resizeTo(myWidth, myHeight);
(Sorry, used carets, not brackets first post! Hope this is right for separating code.)

Directly trying "myPic.width" in the function "resizeTo()" also fails to swap an image.

Dec 29 '07 #3
16,027 Expert Mod 8TB
You may need to make sure that the image has fully loaded. Are the values of myWidth and myHeight correct?
Dec 29 '07 #4
The problems lies in line 2 of your suggestion.

As it's always a local file, this needs to be:
myPic.src = 'file://'+path;

This works, excepting some images which appear not to have their H&W attributes within the file.

Nearly there <G>!

Dec 29 '07 #5
16,027 Expert Mod 8TB
Most likely the problem is that the image has not yet fully loaded which means that the width and height properties are not available yet. If it works sometimes, it may mean that the image is cached already, so the values are available immediately.

Use the img.complete property (non-standard, but seemingly well-supported) to check if the image has completed loading.
Dec 29 '07 #6
I'm not familiar with the img.complete property, so did a quick Google and found many messages that it returns errors in Opera and Safari.

Interestingly, the latest version seems to work with anything I've yet tried. NO image has yet gone to the 'default' values per the DOM Inspector.

Expand|Select|Wrap|Line Numbers
  1. function swapMe(pathField, previewName)
  2. {       
  3.     var path = pathField.value;
  4.     if (path.search(imgRe) != -1)
  5.     {   
  6.         myPic = new Image();
  7.         myPic.src = 'file://'+path;
  8.         var myWidth =  myPic.width;
  9.         var myHeight = myPic.height;
  10.         if (myWidth == 0)
  11.         { 
  12.             myWidth = 280;
  13.             myHeight = 325;
  14.          }else{
  15.             myWidth = myWidth*.4;
  16.             myHeight = myHeight*.4;
  17.         }
  18.         dd.elements.replaceMe1.swapImage('file://'+path) ;
  19.         dd.elements.replaceMe1.resizeTo(myWidth, myHeight);
  20.     }       
  21.     else    
  22.     {   
  23.         alert("JPG, PNG, and GIFs only!");
  24.     } 
  25. }
I found a simple additional function that seems to work - a noticeable delay in the load. That should have given the image enough time to load when called immediately after the .src setting (line 7) with pausecomp(x)

Expand|Select|Wrap|Line Numbers
  1. function pausecomp(millis)
  2. {
  3. var date = new Date();
  4. var curDate = null;
  6. do { curDate = new Date(); }
  7. while(curDate-date < millis);
  8. }
However, if I remove the width 'test' it once again fails loading and H&W are 'null' on many (all?) images.

Advise? Add in the delay or just go with the above (swapImage) code that seems to work on all images.

Thanks for the help!

Dec 29 '07 #7
16,027 Expert Mod 8TB
Instead of a delay function, use setInterval to check the image has loaded. There is also the option of onload, but that's also not standard.
Dec 29 '07 #8

Took a bit, but installed that 'complete' process in the code with the same result as the 'delay'. Slight pause, then images load.

Take out the 'width' test (line 10 & on) in swapMe function and images fail with H&W's of "0".

As it works, seemingly without fail, with the 'width' test in and no 'delay' or 'complete' coding, I'll leave it there (for now <G>!).

Dec 31 '07 #9
16,027 Expert Mod 8TB
With the 'width test', does it not always set the height and width to 325 and 280?

Anyway, glad to hear that you've got something that works. Post again if you have more questions and we'll try and answer them.
Dec 31 '07 #10
For whatever reason ... I've yet to have an image load in, set to the 'default'. With the 'width test' in as in the last swapMe() code, the images are loading and pre-scaled to 40%. Another page, for a different purpose, uses the same code but without the scaling, but with a different 'default' size. It too loads all images when the 'width test' is in place.

Checked some 30 loads and none were exactly the 'fall back' sizes set, should the test show a width of "0". Apparently the values are available when the test is called -=or=- the test forces the loading to finish.

I can't explain it, it just works sufficiently well for our collecting group to plate the early GB stamps on/off line from scans.

Thanks for the help - I'm sure I'll try something else in JS and need advice. <G>

Jan 3 '08 #11
16,027 Expert Mod 8TB
Interesting. I can't put my finger on it, but the most important thing is it works and hopefully in all browsers. Good luck with the rest of your project.
Jan 4 '08 #12

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

7 posts views Thread by Kate | last post: by
2 posts views Thread by dave | last post: by
3 posts views Thread by Gary Dunne | last post: by
8 posts views Thread by Joel Byrd | last post: by
13 posts views Thread by didacticone | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.