根据javascript中的最小宽度/高度和最大宽度/高度调整图像大小

Question

I have this function that resizes an image (after that I have some other stuff to rotate and crop to a square. The problem here is I want the user be able to post images that are at least 640x640. What happens with this function is that if a user posts a 1080X1920 image (iphone picture), it will resize it to 562 X 1000 and then (with not shown code) it will be cropped to 562 X 562 ... The server will so refuse the image because it's smaller then 640X640. Can anyone help me improve this function so that it will return max width and height 1000 X 1000 but also respect a min width and height 640 X 640 ? By experimenting I found that if I set the Max Width and Height to 1138 the same 1080X1920 px image will be cropped to 640X640 but that is not acceptable solution. Any clue?

img.onload = function () {
            var width = img.width,
                height = img.height,
                canvas = document.createElement('canvas'),
                ctx = canvas.getContext("2d"),
                start_Y,
                start_X;

            console.log( width, "  ", height);

            var MAX_WIDTH = 1000;
            var MAX_HEIGHT = 1000;

            // set proper canvas dimensions before transform & export
            if ([5, 6, 7, 8].indexOf(srcOrientation) > -1) {
                if (width > height) {
                    if (width > MAX_WIDTH) {
                        height *= MAX_WIDTH / width;
                        width = MAX_WIDTH;
                    }
                } else {
                    if (height > MAX_HEIGHT) {
                        width *= MAX_HEIGHT / height;
                        height = MAX_HEIGHT;
                    }
                }
                canvas.width = height;
                canvas.height = width;

                console.log(canvas.width, " ", canvas.height);

            } else {

                if (height > MAX_HEIGHT) {
                    width *= MAX_HEIGHT / height;
                    height = MAX_HEIGHT;
                }
                canvas.width = width;
                canvas.height = height;

                console.log(canvas.width, " ", canvas.height);
                }
}

maybe I found a way, I modified the function like this:

        img.onload = function () {
            var width = img.width,
                height = img.height,
                canvas = document.createElement('canvas'),
                ctx = canvas.getContext("2d"),
                start_Y,
                start_X;


            var MAX_WIDTH = 1000;
            var MAX_HEIGHT = 1000;

            var MIN_WIDTH = 640;
            var MIN_HEIGHT = 640;

            var ratio;

            // set proper canvas dimensions before transform & export
            if ([5, 6, 7, 8].indexOf(srcOrientation) > -1) {
                if (width > height) {

                    console.log('w > h');

                    if (width > MAX_WIDTH) {
                        height *= MAX_WIDTH / width;

                        if(height < MIN_HEIGHT){

                            ratio = MIN_HEIGHT / height;

                            height = MIN_HEIGHT;

                            width = MAX_WIDTH * ratio;


                        }else{

                            width = MAX_WIDTH;

                        }


                    }
                } else {

                    console.log('h > w');

                    if (height > MAX_HEIGHT) {
                        width *= MAX_HEIGHT / height;

                        if(width < MIN_WIDTH){

                            ratio = MIN_WIDTH / width;

                            width = MIN_WIDTH;

                            height = MIN_HEIGHT * ratio;

                        }else{

                            height = MAX_HEIGHT;
                        }


                    }
                }
                canvas.width = height;
                canvas.height = width;

                console.log(canvas.width, " ", canvas.height);

            } else {

                console.log('other Orientations');

                if (height > MAX_HEIGHT) {
                    width *= MAX_HEIGHT / height;

                    if(width < MIN_WIDTH){

                        ratio = MIN_WIDTH / width;

                        width = MIN_WIDTH;

                        height = MAX_HEIGHT * ratio;


                    }else{

                        height = MAX_HEIGHT;

                    }


                }
                canvas.width = width;
                canvas.height = height;

                console.log(canvas.width, " ", canvas.height);
            }
}

Answer 1

You have to calculate a ratio like this when width is bigger than height

var ratio = 640 / height;

Or

var ratio = 640 / width;

Having this ratio you can calculate the other value

Height = ratio × height;
Width = ratio × width;

After this you have a redized image / element.