Сохранение соотношения сторон при изменении высоты и ширины

1

Я пытаюсь сделать изменение размера изображения на основе значений, данных ему (ширина/высота)

Значения не должны превышать максимальную и максимальную ширину, но должны поддерживать соотношение.

Прямо сейчас это работает, если я делаю высоту или ширину слишком большой, но если оба вызваны, это не сработает. Так что это логическая ошибка, может кто-то, пожалуйста, помогите мне в этом.

if (maxwidth <= width || maxheight <= height) {

    if(width > maxwidth) {
      var newheight = height * (maxwidth/width);
      newwidth = maxwidth;
      console.log("new height");
    }
    if(height > maxheight) {
      var newwidth = width * (maxheight/height);
      newheight = maxheight;
      console.log("new width");
    }

Для этого в действии перейдите сюда: https://codepen.io/anon/pen/XBEvNO

Ошибка возникает, когда говорят, что ширина равна 1500, а высота - 600.

Я знаю это, потому что второй оператор if перезаписывает первый, но я не знаю, как исправить эту логику.

  • 0
    Можете ли вы добавить вход и ожидаемый выход для нескольких различных значений?
  • 0
    В принципе, единственные значения, которые, как мне кажется, имеют проблему, - это когда ширина и высота больше, чем максимальная. Высота регулируется, а ширина - нет. Поэтому, если вы попробуете 1500x600, вы увидите, как он переполняет контейнер, в котором он находится. Мне нужно, чтобы он оставался внутри.
Теги:

2 ответа

2
Лучший ответ

Во-первых, если вы не хотите, чтобы значения превышали их максимальные значения, но хотите масштабировать изображение, чтобы он сохранял соотношение, вам нужно установить максимальные значения до того, как вы выработаете полученную ширину/высоту из этого изменение ширины/высоты.

Во-вторых, если вы хотите, чтобы соотношение было одинаковым, вы не должны одновременно изменять высоту и ширину, потому что, если вы измените ширину, есть ровно одно другое значение высоты, которое поддерживает соотношение

Математика для этого была бы такой:

R = Ratio (Предполагая, что ваши максимальные значения - это соотношение, которое вы хотите: R = MaxWidth/MaxHeight)

H = Высота

W = ширина

W = H * R

H = W/R

if (maxwidth <= width) {

if(width > maxwidth) {
  newwidth = maxwidth;
  var newheight = newwidth / (maxwidth/maxheight);
  console.log("new height");
}

Мало того, что это необходимо изменить, чтобы соотношение было правильным, но код, который вы для его уменьшения, также должен быть изменен.

Если по коэффициенту вы не имели в виду отношение исходных изображений W/H, просим пояснить.

Для поддержания введенного отношения пользователя попробуйте следующее:

if (maxwidth <= width || maxheight <= height) {
var ratio = width/height;
var heightRatio = height/maxheight;
var widthRatio = width/maxwidth
if(width > maxwidth && widthRatio >= heightRatio) {
  newwidth = maxwidth;
  var newheight = newwidth / ratio;
  console.log("new height");
}
else if(height > maxheight && heightRatio > widthRatio) {
  newheight = maxheight;
  var newwidth = newheight * ratio;
  console.log("new width");
}

Проверка больших размеров по сравнению с их максимальным размером гарантирует, что при масштабировании размер, наибольший по максимальному размеру, масштабируется до макс, таким образом, другой размер по-прежнему не достигает максимума в несколько раз

Поделиться
  • 1
    Изображение генерируется на лету. Пользователь вводит значения того, насколько большим должно быть изображение, и создает его. Проблема заключается в том, что поле, в котором создается изображение, имеет только определенный размер, поэтому масштаб должен находиться внутри этого поля. По сути, мне нужно, чтобы изображение создавалось внутри рамки и поддерживало его истинный масштаб.
  • 0
    Я обновил свой ответ. Я надеюсь, что это отвечает вашим потребностям.
Показать ещё 4 комментария
1

Вам нужно решить, будете ли вы масштабироваться по отношению к height/maxHeight или width/maxWidth затем посмотрите, какой из них вы можете использовать, не делая слишком большого размера другого. Другой способ мышления спрашивает: если мы максимизируем ширину, высота становится слишком большой? Если не увеличить ширину, в противном случае увеличить высоту. В любом случае мы масштабируемся по тому же масштабу для ширины и высоты, чтобы соотношение сторон оставалось одинаковым. (Вероятно, вы захотите добавить проверки работоспособности для деления на ноль)

function resize(size, max){ 
  // can we maximize the width without exceeding height limit? 
  let resize_factor = (size.height / ( size.width/max.width)) <= max.height
  ? size.width/max.width
  : size.height/max.height

 return {width: size.width/resize_factor, height: size.height/resize_factor}
}

let max = {
  width: 100,
  height: 50
}

console.log(resize({width: 500, height:50}, max))
console.log(resize({width: 500, height:1000}, max))
console.log(resize({width: 40, height:10}, max))
console.log(resize({width: 1, height:2}, max))
console.log(resize({width: 2, height:1}, max))
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню