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

Question

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

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

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

Примерно так:

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

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

Answer 1

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

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

h * w = original image's pixel size (let's got with 640x480 = 307,200 pixels)
A = maximum number of pixels allowed (let's 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 по ширине.

Answer 2

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.

Answer 3

Вот функция, которую я придумал, которая проще, чем некоторые упоминали, и делает то, что мне нужно. Он ограничен установленным значением 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);
   }
}

Answer 4

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

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, чтобы получить новые размеры

Answer 5

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

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