How can I dynamically set the image size ratio depending on the returned image in raphael?

Question

How can I dynamically set the image size ratio depending on the returned image in raphael?

Here is some code to give you an idea:

var viewer = Raphael(0,0,scrWidth, scrHeight);
viewer.image(dynamicUrl, 140, 140,300, scaledHeight);

Thank you

Answer 1

You can load the image outside the DOM and get its dimensions... You can put this inside a function:

var myImg = new Image();
myImg.src = dynamicUrl;
myImg.onload = function() {
    var width = myImg.width;
    var height = myImg.height;
    var scale = 0.5; // for example

    var viewer = Raphael(0,0,width, height);  // or whatever other size
    viewer.image(dynamicUrl, 0, 0, width*scale, height*scale); // scale image
        // after the image is in the viewer you can use .scale()
}

jsFiddle

Now you can divide or multiply both width and height to scale. Make sure you pay attention to the timing.

Also, once the image is in Raphael, you can use .scale()