Я пытаюсь написать функцию 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);
}
Не уверен, что это по теме здесь, но я не в состоянии его мозг.
Вот функция, которую я придумал, более простой, чем некоторые из упомянутых, и делает то, что мне нужно. Он ограничивает установленную 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);
}
}
Похоже, вы хотите ограничить пиксели эскизов как можно ближе к средней области, как и все другие миниатюры, правильно?
Итак, в основном, учитывая 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 ширины.
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
.
Это не так сложно.
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, чтобы получить новые измерения
Вы ищете что-то вроде:
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);
}
newY = sqrt(newArea/aspectRatio); newX = newY * aspectRatio
.