Best way to scale a image keeping aspect ratio?

[riahc3]

Hello

I want to create a Javascript button that takes a image on a page and makes it bigger keeping aspect ratio and also another button and makes it smaller but also keeping aspect ratio.

Can someone tell me a good example on how to do this?

Thank you

[bops]

I'm not sure if I am thinking too simply, but to keep an image's aspect ratio you can just resize either the height OR width but not both. The other should be left as auto. Working out the orientation of the image i.e. portrait or landscape might help you decide which one to resize.

[riahc3]

I'm not sure if I am thinking too simply, but to keep an image's aspect ratio you can just resize either the height OR width but not both. The other should be left as auto. Working out the orientation of the image i.e. portrait or landscape might help you decide which one to resize.

Im not sure how that would work....

The button would reduce its height (lets say) 2px....Then it would automatically do the same for the width?? Not sure if it would work.

Obviously of course maintaining the current position...

[Troy III]

bops is correct -it will work, simply don't declare both dimensions explicitly on an image

[JorgeM]

The button would reduce its height (lets say) 2px....Then it would automatically do the same for the width?? Not sure if it would work.

You would increase the height and width by multiplying it by a factor, not by adding number of pixels.

So, when the way i would imagine it is if you click on a button to increase the size of the image, you read the current width and height, then would multiply its height by 2, then the width by 2. If you hit the decrease button, read the current size and then multiply by 0.5 on both height and width.

[riahc3]

The code is currently like this (this is not my code)

$j('#imageplus').mousedown(function(e) {
            this.image.width += this.RESIZE;
            this.image.height += this.RESIZE;

            this.x = (canvas.width() / 2) - (this.image.width / 2);
            this.y = (canvas.height() / 2) - (this.image.height / 2 + 10);

            this.canvasListener.redraw();
        }.bind(this));

        $j('#imageminus').mousedown(function(e) {
            this.image.width -= this.RESIZE;
            this.image.height -= this.RESIZE;

            this.x = (canvas.width() / 2) - (this.image.width / 2);
            this.y = (canvas.height() / 2) - (this.image.height / 2 + 10);

            this.canvasListener.redraw();
        }.bind(this));

RESIZE is 5.

The image is shown exactly as it is in its original size.

[JorgeM]

Here's an example on jsfiddle which increases and decreases the size of an image using buttons. It may help you or others that come accross this thread.

http://jsfiddle.net/bUfq2/

[riahc3]

Looks great :)

Why the 1.1 and the 0.9?

[riahc3]

Hmm.......seeing how is the best way to do it but for some reason can't see the similarity between both codes....

The fiddle uses CSS but my code directly accesses the properties of the item (as far as I can tell)

[JorgeM]

Why the 1.1 and the 0.9?

No particular reason other than to grow and shrink with a using a smaller factor.

some reason can't see the similarity between both codes....

There are always options and different ways to approach a problem.

[riahc3]

Got it to work :)

Dont understand about scales too much :P but is there a way to make it with a even smaller factor?

Would it be 1.0 and 0.8 and such?

[JorgeM]

When you multiple a number closer to 1 the change is scale is smaller. So for example, when you make it bigger, multiplying 1.01 would produce a smaller change than 1.1.

[riahc3]

Perfect JorgeM thank you....

[riahc3]

Hmm I got it to work for makign the image larger (smaller factor) but when I make it smaller it takes two clicks for it to disappear....

$j('#imageplus').mousedown(function(e) {

           /* this.image.width = this.image.width+ this.RESIZE;
            //this.image.width += this.RESIZE;
            //this.image.height += this.RESIZE;
            this.image.height = this.image.height + this.RESIZE;*/

            this.image.width = this.image.width * 1.01;

            this.image.height = this.image.height * 1.01;

            this.x = (canvas.width() / 2) - (this.image.width / 2);
            this.y = (canvas.height() / 2) - (this.image.height / 2 + 10);

            this.canvasListener.redraw();
        }.bind(this));

        $j('#imageminus').mousedown(function(e) {
            /*//this.image.width -= this.RESIZE;
            //this.image.height -= this.RESIZE;
                 this.image.width = this.image.width- this.RESIZE;
            this.image.height = this.image.height - this.RESIZE;*/

            this.image.width = this.image.width * 0.09;

            this.image.height = this.image.height * 0.09;




            this.x = (canvas.width() / 2) - (this.image.width / 2);
            this.y = (canvas.height() / 2) - (this.image.height / 2 + 10);

            this.canvasListener.redraw();
        }.bind(this));

Sorry about scaling; Not too logic for these things....

[JorgeM]

So for reducing the size, you chose to multiply * .09 which would result in a very big change. Try multiplying * .99 if you want the changes to be very subtle.

Remember, using this approach (which may or may not be the best one), small changes require the multiplier to be close to the number 1. Think of it like a number line. 1, in this case, is the center (no change). Hope that doesnt confuse you.

[riahc3]

1. Think of it like a number line. 1, in this case, is the center (no change). Hope that doesnt confuse you.

It confused me, yes lol.....

No idea what you ment.

[Troy III]

A proof of concept*(s)... code

<script> function resize( img, ratio ){ img.width = img.width * ratio } </script>

<button onclick = "resize( img1, '0.9' )" >Smaller</button>
<button onclick = "resize( img1, '1.1' )" >Bigger</button>

<p><img id="img1" width=200 src="http://www.google.com/images/srpr/logo4w.png">

the above example is supported by all traditional / conventional browsers.
An universal approach would bring us a slightly longer/different code...:

<script> function resize( img, ratio ){ img = document.images[img]; img.width = img.width * ratio }</script>

<button onclick = "resize( 'img1', '0.9' )" >Smaller</button>
<button onclick = "resize( 'img1', '1.1' )" >Bigger</button>

<p><img id="img1" width=200 src="http://www.google.com/images/srpr/logo4w.png" >

but still reusable & libs., free!

Keeping it simple and widely supported, is not always such an easy task as it might appear above, but here we are.

http://jsfiddle.net/bUfq2/10/

[riahc3]

The code I posted (thanks to what was posted earlier) works. The problem is not the code. The problem is the scale.

The example uses "1.1" and "0,9", There is a difference each time Im changing the size. What if I want to make the difference less and less noticable? What (example) numbers would I use?

[Troy III]

In your "best way to scale an image,..." question, - "keeping aspect ratio" is what takes the priority (not the scaling), because it implies that you already know (no less than) few ways of scaling it.
That's why my answer is concentrated on the "aspect-ratio" issues rather than the scaling itself.
(the code you were using, including thanks to what was posted, was not preserving the aspect ratio;the example I recently posted, does.)

My demo was built on top of JorgeM's math resize moddel.
Not dropping it would mean that you could be feeding the function with finer values on scaling arguments.
So using a value of 1% instead of the current 10, will result in smoother sizing but 10 times the amount of clicks.

<button accesskey='s' onclick = "resize( 'img1', '0.99' )" ><u>S</u>maller</button>
<button accesskey='b' onclick = "resize( 'img1', '1.01' )" ><u>B</u>igger</button>

Adding keyboard control convenience to it as Alt+S [shrink]; Alt+B [grow] will help equalize the effort.

http://jsfiddle.net/bUfq2/11/

p.s.:
(if other precautions are not taken), the math model inherited from JorgeM may break as soon as a percentage of a smaller scale image becomes too smal to compute. But that's for release stage consideration.

[riahc3]

I think I got it solved :)

[Troy III]

I think I got it solved :)

Enlighten us >>how do you scale images while preserving their original aspect ratios<<
Please...

[riahc3]

Ive made the process a bit differently.....

When I load the image, I automatically scale it to the size of my "area". Then from there I work upwards or downwards....

When I load

image.onload = function()
        {


            if (image.width >= image.height)
            {

                var bigside=image.width;
            }
            else
            {

                var bigside=image.height;
            }




            factor=canvas.height()/bigside;
            $j("#factor").html(factor);


            x = (canvas.width() / 2) - ((image.width*factor) / 2);
            y = (canvas.height() / 2) - ((image.height*factor) / 2+10); 
            $j("#width").html(image.width*factor);
            $j("#height").html(image.height*factor);

            context.beginPath();
            context.drawImage(image, x, y, image.width*factor, image.height*factor);
            context.closePath();


        }

Scale up and down:

$j('#imageplus').mousedown(function(e) {


            var factor=$j("#factor").html();




                if (this.image.width >= this.image.height)
             {

                    var bigside=this.image.width;
             }
                else
                {

                    var bigside=this.image.height;
                }








            this.image.width = $j("#width").html() * 1.01;

            this.image.height = $j("#height").html() * 1.01;

            $j("#width").html(this.image.width);

            $j("#height").html(this.image.height);


            this.x = (canvas.width() / 2) - ((this.image.width) / 2);
            this.y = (canvas.height() / 2) - ((this.image.height) / 2 );





            this.canvasListener.redraw();
        }.bind(this));

        $j('#imageminus').mousedown(function(e) {


            //this code glitches for now. Remove this if
            if (($j("#width").html()<="1") || ($j("#height").html()<="1"))
            {
             alert ("Too small");
             return true;   
            }

            var factor=$j("#factor").html();


              if (this.image.width >= this.image.height)
             {

                    var bigside=this.image.width;
             }
                else
                {

                    var bigside=this.image.height;
                }







            this.image.width = $j("#width").html() * 0.99;

            this.image.height = $j("#height").html() * 0.99;

            $j("#width").html(this.image.width);

            $j("#height").html(this.image.height);




            this.x = (canvas.width() / 2) - ((this.image.width) / 2);
            this.y = (canvas.height() / 2) - ((this.image.height) / 2 );




            this.canvasListener.redraw();
        }.bind(this));

[Troy III]

Can you jsfiddle it, 'cause the code is a bit to ong not pure {javascript} and I am not sure I'm seing it working just by reading it.And and if so mark the thread as solved so that other visitors may benefit?