javascript — алгоритм масштабирования изображения для наилучшего размещения кадра (div)

Я очень слаб в математике. Я веб-программист, и обычно моя работа не требует слишком много математики — это скорее запись записей в базу данных, извлечение отчетов, создание этих модных веб-страниц и т. Д. И т. Д. Итак, я получил задание, которое для меня «математическое» , но я надеюсь, что это детская игра для некоторых из вас, ребята, математики, и вы поможете мне … Это может быть даже интересной проблемой для вас, просто слишком сложной для меня.

Так недавно я получил эту задачу, где мне дают изображение с областью, отмеченной сверху этого. Эта область будет отмечена как верхние левые пиксели (x1, y1) и нижние правые пиксели (x2, y2)
Так что для изображения у меня есть следующая информация:

Image Width (iw)
Image Height (ih)
Image Area Top Left (x1,y1)
Image Area Bottom Right (x2,y2)

Теперь есть коллекция кадров, каждый кадр будет иметь Frame Width (fw) а также Frame Height (fh), Моя работа состоит в том, чтобы найти оптимальный способ размещения области изображения внутри рамки, не имея пустой области внутри рамки, используя масштабирование изображения, если это необходимо.

Поэтому я разбил его на следующие задачи:

1. Область изображения (не заполняющее изображение) должна помещаться внутри кадра. Если Image Area > FrameЯ должен уменьшить Image (до%). Если Image Area < Frame Я должен масштабировать Image Up.

2. Соотношение сторон изображения не должно нарушаться при масштабировании.

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

Теперь, когда я написал все эти правила, я не могу обернуть голову, формализуя это в математическую «формулу» / «процедуру» / «набор правил», которую я затем могу воссоздать в своем программном обеспечении.

Для масштабирования я обнаружил, что эта формула хорошо работает (при программировании псевдокода):

imageX = Image.width()
imageY = Image.height();
imageRatio = imageX / imageY;

frameX = Frame.width();
frameY = Frame.height();
frameRatio = frameX / frameY;

if (imageRatio < wellRatio)
{
scale = imageX / wellX;
}
else
{
scale = imageY / wellY;
}
resizeX = (imageX / scale);
resizeY = (imageY / scale);

Однако я не знаю, как связать это в целом.

Кто-нибудь может мне помочь? Я безуспешно пытаюсь больше недели 🙁 Я использую PHP и Javascript, и я довольно хорошо разбираюсь в этих двух технологиях. Обычно я могу решить большинство проблем, с которыми я сталкиваюсь изо дня в день, которые связаны с ними, однако это над моей головой.