在javascript中调整关于最小宽度/高度和最大宽度/高度的图像

Question

我有这个功能可以调整图像的大小（之后我还有一些其他东西可以旋转并裁剪成正方形。 这里的问题是我希望用户能够发布至少640x640的图像。使用此功能会发生的情况是，如果用户发布1080X1920图像（iphone图片），它会将其大小调整为562 X 1000，然后（未显示代码）将其裁剪为562 X 562 ...服务器将如此拒绝图像因为它比640X640小。 任何人都可以帮助我改进这个功能，使它返回最大宽度和高度1000 X 1000，但也尊重最小宽度和高度640 X 640？ 通过实验我发现，如果我将最大宽度和高度设置为1138，则相同的1080X1920像素图像将被裁剪为640X640，但这是不可接受的解决方案。任何线索？

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);
                }
}

也许我找到了一种方法，我修改了这个函数：

        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

当宽度大于高度

时，你必须计算这样的比率

var ratio = 640 / height;

或

var ratio = 640 / width;

拥有此比率，您可以计算其他值

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

在此之后你有一个红色的图像/元素。