изменить размер изображения по площади

1

Я пытаюсь написать функцию javascript для изменения размера изображения на основе определенной области (или в моем случае (несколько неточном) "среднем измерении", так как это легче думать с точки зрения. Вместо того, чтобы питаться максимальной высотой и шириной, Я хочу подавать в максимальной области, чтобы длинные или узкие изображения визуально отображались примерно одинакового размера.

Изображение 174551

Я действительно поймал математический аспект этого, хотя... только как это логично, так как я не делал много математики в последнее время.

В принципе, учитывая пропорции, я хочу определить максимальный размер в пределах области.

Что-то вроде этого:

function resizeImgByArea(img, avgDimension){
    var w = $(img).width();
    var h = $(img).height();
    var ratio = w/h;
    var area = avgDimension * avgDimension;
    var targetHeight //something involving ratio and area
    var targetWidth //something involving ratio and area
    $(img).width(targetWidth);
    $(img).height(targetHeight);
}

Не уверен, что это по теме здесь, но я не в состоянии его мозг.

Теги:
math
area
dimensions

5 ответов

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

Вот функция, которую я придумал, более простой, чем некоторые из упомянутых, и делает то, что мне нужно. Он ограничивает установленную maxWidth, но не высоту из-за конкретных требований, которые я использовал. Было бы разумно наброситься на maxHeight, а также на некоторую очистку, но она будет выполнена.

function resizeImgByArea(imgId, avgDimension){
   var node, w, h, oldArea, oldAvgDimension, multiplicator, targetHeight, targetWidth, defAvgDimension;
   node = $('#' + imgId);
   node.css('width', '').css('height', '');
   var maxW = $('#' + imgId).css('maxWidth');
   if (maxW){
       defAvgDimension = maxW;
   } else {
       defAvgDimension = 200;
   }
   avgDimension = (typeof avgDimension == "undefined")?'defAvgDimension':avgDimension;
   w = node.width();
   h = node.height();
   oldArea = w*h;
   oldAvgDimension = Math.sqrt(oldArea);
   if (oldAvgDimension > avgDimension){
       multiplicator = avgDimension / oldAvgDimension;
       targetHeight = h * multiplicator;
       targetWidth = w * multiplicator;
       node.width(targetWidth);
       node.height(targetHeight);
   }
}
Поделиться
2

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

Итак, в основном, учитывая h/w исходного изображения и целевую область A:

h * w = original image pixel size (let got with 640x480 = 307,200 pixels)
A = maximum number of pixels allowed (let go for 100x100 = 10,000 pixels)

307,200 / 10,000 = 30x reduction

original aspect ratio = 640 / 480 = 1.3333 : 1

Чтобы вычислить новый размер эскиза x/y:

newX * newY = 10000
newX = newY * 1.333
(newY * 1.333) * newY = 10000
newY^2 * 1.333 = 10000
newY^2 = 10000 / 1.333
newY^2 = 7502
newY = 86.6 -> 87
newX = 87 * 1.333 = 115.97 -> 116

116 x 87 = 10,092 pixels

если бы мы округлили размеры эскизов, получим 86x114 = 9,804 пикселя

поэтому... чтобы преобразовать ваше изображение 640x480 в стандартный размер пикселей размером в 10 000 и более, вам понадобится новый размер изображения 86-87 по высоте и 114-116 ширины.

Поделиться
  • 0
    Потребовалось некоторое время, чтобы понять ваш странный способ объяснить это, потому что он вообще не работал бы как код, но он работает, как только я понял это! В основном это просто newY = sqrt(newArea/aspectRatio); newX = newY * aspectRatio .
0 
function fitImageInArea(img, area) {
    var r;

    if (img.width/img.height >= area.width/area.height) {
        r = area.width / img.width;
        img.width = area.width;
        img.height = img.height*r;
    } else {
        r = area.height / img.height;
        img.height = area.height;
        img.width = img.width*r;
    }

    return img;
}

Дайте изображение или что-нибудь с width и height свойствами в качестве аргумента. Аргумент area также принимает свойства width и height.

Поделиться
0

Это не так сложно.

maxPix = средний ^ 2

maxPix = x * h + x * w

средний ^ 2 = x * h + x * w//: x

средний ^ 2/x = h + w

обратное и умноженное со средним ^ 2

x = средний ^ 2/(h + w)

затем умножим h и w с x, чтобы получить новые измерения

Поделиться
  • 0
    Благодарю. является обратным и умножить свою собственную операцию, или это описывает то, что вы сделали выше? Я не посещал уроки математики почти 10 лет.
  • 0
    Это описание того, что я делаю. Таким образом, инверсия (я не являюсь носителем английского языка) помещает значение "под линией", чтобы x инвертированный был 1 / x, а 1/2 инвертированный - 2 ... это полезно, когда у вас есть переменная для решения "под линия". Вы можете просто инвертировать все вещи. А потом я умножаю на среднее ^ 2, чтобы иметь один х
0

Вы ищете что-то вроде:

function resizeImgByArea(img, avgDimension) {
    var w = $(img).width();
    var h = $(img).height();
    var maxWidth = avgDimension;
    var maxHeight = avgDimension;
    var divisor;
    var targetWidth = w;
    var targetHeight = h;

    if (w > maxWidth || h > maxHeight) {
        // Set the divisor to whatever will make the new image fit the dimensions given
        if((w - maxWidth) > (h - maxHeight)) {
            divisor = w / maxWidth;
        }
        else {
            divisor = h / maxHeight;
        }

        targetWidth = w / divisor;
        targetHeight = h / divisor;
    }

    $(img).width(targetWidth);
    $(img).height(targetHeight);
}
Поделиться
  • 0
    нет, я не хочу, чтобы он был установлен на maxHeight или maxWidth .. скорее, чтобы сделать изображение максимально большим при сохранении того же соотношения сторон при максимальной площади .. фактически, чтобы получить изображения, которые выглядят примерно одинакового размера, если они узкие по сравнению с квадратными
  • 0
    Итак, вы хотите, чтобы изображение вписалось в квадрат? При необходимости изображение должно быть обрезано?
Показать ещё 3 комментария

Ещё вопросы

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