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

Question

How can I dynamically set the image size ratio based 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

Answer 1

You can upload an 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 the values widthand heightthe scale. Make sure you pay attention to time.

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