Javascript 图像调整大小计算

Question

假设我有一张 1920 x 1280 的图像。

我正在使用滑块缩小图像，从 100% 到 0%，其中 100% 是原始尺寸，0% 是最小尺寸。

图片的高度或宽度不得小于 350，因此 0% 应等于此最小尺寸。

我将使用什么公式来计算新维度？如果你能解释一下逻辑，那会很有帮助。

我确定这是一道我不及格的 SAT 题...

Answer 1

下面的方法将按百分比调整图像大小，0% 是最小值，图像保持宽高比：

最好的方法是创建一个 function，它采用值 x、y、percentage 和 minimum。接下来，创建一个名为 ratio 的变量，即 y/x（解释如下）。然后将 x（减去 minimum，以减小范围，因此使 0% 等于 350）乘以 (percentage/100) 和 y（减去 minimum 倍 ratio，为 y 创建一个不同的范围，从而保持纵横比）通过 (percentage/100) 和 return 与 array重新调整大小 x 和 y，每个加上 minimum（和 y 加上 minimum 次 ratio 以补偿我们所做的）所以 0% 是 350 和 233.333，而 100% 是 1920 和 1280。如果高度大于宽度，比率将是 y/x 而不是 x/y，并且 minimum 将乘以 ratio 用于 x，而不是 y。看看这段代码：

resizeImage = function(x,y,percentage,minimum) {
    if (x > y) {
        ratio = y/x;
        rx = (x-minimum)*(percentage/100);
        ry = (y-minimum*ratio)*(percentage/100);
        return [rx+minimum,ry+minimum*ratio];
    } else {
        ratio = x/y;
        rx = (x-minimum*ratio)*(percentage/100);
        ry = (y-minimum)*(percentage/100);
        return [rx+minimum*ratio,ry+minimum];
    }
}

– 和运行是这样的：

resizeImage(1920,1280,0,350);
// returns [350, 233.333]
resizeImage(1920,1280,30,350);
// returns [821, 547.333]

看看这个工作示例，使用 HTML、JavaScript 和 jQuery（拖动图像上方的滑块以重新调整大小）：

$(document).ready(function() {

    var w = 518;
    var h = 387;
    var min = 350;

    resizeImage = function(x,y,percentage,minimum) {
        if (x > y) {
            ratio = y/x;
            rx = (x-minimum)*(percentage/100);
            ry = (y-minimum*ratio)*(percentage/100);
            return [rx+minimum,ry+minimum*ratio];
        } else {
            ratio = x/y;
            rx = (x-minimum*ratio)*(percentage/100);
            ry = (y-minimum)*(percentage/100);
            return [rx+minimum*ratio,ry+minimum];
        }
    }

    $("#slider").change(function() {
        p = $("#slider").val();
        $("img").css({width:resizeImage(w,h,p,min)[0],height:resizeImage(w,h,p,min)[1]});
    })
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="range" min="0" max="100" value="50" step="1" id="slider" style="width:500;">
<br>
<img src="https://avatarfiles.alphacoders.com/157/157316.jpg">

希望对您有所帮助！ :)

Answer 2

var min=Math.min(width,height);
var result=Math.max(min * (percentage/100),350);
var newHeight=(result/min) * height;
var newWidth=(result/min) * width;

0 到 1 之间的百分比（可以更改为 0 - 100 个整数而不是 0 到 1 个浮点数）。其他词正在描述它们自己。可能作为函数有用：

function ff(height,width,percentage){    
    var min=Math.min(width,height);
    var result=Math.max(min*(percentage/100),350);
    var newHeight=(result/min) * height;
    var newWidth=(result/min) * width; 
    return [newWidth,newHeight]; 
 }

这不需要数学。 Css 已经具备这些能力了。

min-width: 350px;
min-height:350px;
width: x% (or height: ... x%)
in a 1920 by 1280 sized div.

Answer 3

好的。要计算图像大小调整，您可以使用以下计算：最大宽度：1920 最大高度：1280

最小宽度：？最低身高：350

1280 - 350 = 930 930/100 = 9.3 1% 等于 9.3px

1920 - 1280 = 640 350 + 640 = 990

新的最小宽度 = 990

1920 - 990 = 930 930/100 = 9.3

1% 等于 9.3

那么你将不得不为每 1% 使用 9.3 像素值

如果您认为 350 像素是两个维度的最小值，您的图片看起来会很奇怪

Answer 4

经过一些调整并查看提供的答案后，这里有一些工作代码可以根据高度、宽度和纵横比的差异进行调整。使用一些 data 属性，这是一个很好的开始，如果您使用不同的数据通信形式，只需根据需要替换变量。首先，HTML:

<input type="range" min="0" max="100" value="100" step="1" id="slider" style="width: 500px;" />
<div id="per">100%</div>
<div>
    <img src="http://placehold.it/1920x1280" alt="My image" id="my-img" />
</div>

够简单了，测试的时候改一下img标签的src属性，看看代码是如何处理不同尺寸的。现在是有趣的部分：

var id = function(i){return(document.getElementById(i));},
    slider = id('slider'),
    per = id('per'),
    img = id('my-img'),
    d_w = 0,
    d_h = 0,
    min = 350,
    reSize = function(percent) {
        var h = slider.getAttribute('data-h') == 'true',
            s_h = (parseFloat(slider.getAttribute('data-step-h')) * percent) + min,
            s_w = (parseFloat(slider.getAttribute('data-step-w')) * percent) + min,
            o_h = (d_h / d_w) * s_w,
            o_w = (d_w / d_h) * s_h;
        img.style.height = ((h) ? s_h : o_h).toString() + 'px';
        img.style.width = ((h) ? o_w : s_w).toString() + 'px';
    };
img.addEventListener('load', function() {
    d_w = this.width;
    d_h = this.height;
    slider.setAttribute('data-h', (d_w > d_h));
    slider.setAttribute('data-step-h', (d_h - min) / 100);
    slider.setAttribute('data-step-w', (d_w - min) / 100);
    slider.addEventListener('input', function() {
        var perc = parseFloat(this.value);
        per.innerHTML = perc.toString() + '%';
        reSize(perc);
    }, false);
}, false);

一些快速指示，确保将其包装在 onload 或更好的 DomContentLoaded 方法中，例如：

document.addEventListener('DOMContentLoaded', function()( /* Code */ }, false);

请记住，旧版 IE 不支持 range 类型的 input，有些 hidden 输入可以代替吗？此外，在 slider 事件中不是 input，在 IE 10 中它必须是 change，因此请记住这一点以实现跨浏览器。

代码分解，是吗？好吧，首先我们声明一些变量，其中id只是通过ID抓取，抓取元素，还有一些'global'之类的变量（d_w，d_h，min) 其中 d_w 是 default width 而 d_h 是 default height。 reSize() 函数获取分配给图像的数据并将其用于计算并确定哪边更长，然后是 s_h 和 s_w 使用步长调整像素，某些方面比方程，最后用CSS.

命中元素的width和height

slider.addEventListener 做一些简单的事情，比如在移动时更新百分比和运行 reSize() 函数。同样，确保检查 IE 10 并将 input 替换为 change 如果您希望它在那个上工作... 'browser'.

最后，img 事件获取默认的 width 和 height，将它们分配给所述变量（d_w 和 d_h），检查哪个side 更长，并且在 Paulo 的帮助下，根据实际尺寸与最小尺寸的偏移计算每个百分比的步长。我在 Chrome、FF 和 IE 10+ 上对此进行了测试，它工作正常。它适用于 IE 9>，但您必须使用 attachEvent 而不是 range 元素。希望这有帮助。

编辑
我将 slider 事件放在 img 加载事件中，以防止过早触发代码。如果你愿意，我可以进一步调整它，甚至让它成为一个独立的 'class'（嗯，有点，JS 类很奇怪），让我知道，我会尝试一下。

Javascript 图像调整大小计算

Javascript Image Resize Calculation

javascript

math

scale

image-resizing

percentage