Zorn's DragDrop Library - swapImage() function query

[trackside]

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.

var imgRe = /^.+\.(jpg|jpeg|gif|png)$/i;
 
function swapMe(pathField, previewName)
{       
    var path = pathField.value;
    if (path.search(imgRe) != -1)
    {   
        dd.elements.replaceMe.swapImage('file://'+path) ;
    }       
    else    
    {   
        alert("JPG, PNG, and GIFs only!");
    } 
}
 

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?

Thanks,

[acoder]

Welcome to TSDN!

Preload the image and get its height and width and set replaceMe's properties to these:

var img = new Image();
img.src = path;
var width = img.width;
var height = img.height;

[trackside]

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!

        myPic = new Image();
        myPic.src = path;
        var myWidth =  myPic.width;
        var myHeight = myPic.height;
        dd.elements.replaceMe1.swapImage('file://'+path) ;
        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.

JA

[acoder]

You may need to make sure that the image has fully loaded. Are the values of myWidth and myHeight correct?

[trackside]

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>!

Thanks,
JA

[acoder]

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.

[trackside]

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.

function swapMe(pathField, previewName)
{       
    var path = pathField.value;
    if (path.search(imgRe) != -1)
    {   
        myPic = new Image();
        myPic.src = 'file://'+path;
        var myWidth =  myPic.width;
        var myHeight = myPic.height;
        if (myWidth == 0)
        { 
            myWidth = 280;
            myHeight = 325;
         }else{
            myWidth = myWidth*.4;
            myHeight = myHeight*.4;
        }
        dd.elements.replaceMe1.swapImage('file://'+path) ;
        dd.elements.replaceMe1.resizeTo(myWidth, myHeight);
    }       
    else    
    {   
        alert("JPG, PNG, and GIFs only!");
    } 
}
 

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)

function pausecomp(millis)
{
var date = new Date();
var curDate = null;
 
do { curDate = new Date(); }
while(curDate-date < millis);
}
 

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!

JA

[acoder]

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.

[trackside]

Thanks.

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>!).

JA

[acoder]

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.

[trackside]

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>

JA

[acoder]

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.