当前位置：文江博客话题详情

计算长宽比的算法是什么？

发布于 2024-07-29 17:23:20 字数 135 浏览 4 评论 0原文

我计划将它与 JavaScript 一起使用来裁剪图像以适合整个窗口。

编辑：我将使用第 3 方组件，该组件仅接受以下格式的宽高比：4:3、16:9 。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

别念他 2024-08-05 17:23:20

我猜您正在寻找可用的纵横比 integer:integer 解决方案（如 16:9），而不是 float:1 解决方案（如 ） >1.77778:1。

如果是这样，您需要做的是找到最大公约数（GCD）并将两个值除以该值。 GCD 是能整除这两个数字的最高数字。因此，6 和 10 的 GCD 为 2，44 和 99 的 GCD 为 11。

例如，1024x768 显示器的 GCD 为 256。当您将这两个值除以时，您将得到 4x3 或 4:3。

（递归）GCD 算法：

function gcd (a,b):
    if b == 0:
        return a
    return gcd (b, a mod b)

在 C 语言中：

static int gcd (int a, int b) {
    return (b == 0) ? a : gcd (b, a%b);
}

int main(void) {
    printf ("gcd(1024,768) = %d\n",gcd(1024,768));
}

这里有一些完整的 HTML/Javascript，它展示了一种检测屏幕尺寸并从中计算长宽比的方法。这适用于 FF3，我不确定其他浏览器对 screen.width 和 screen.height 有何支持。

<html><body>
    <script type="text/javascript">
        function gcd (a, b) {
            return (b == 0) ? a : gcd (b, a%b);
        }
        var w = screen.width;
        var h = screen.height;
        var r = gcd (w, h);
        document.write ("<pre>");
        document.write ("Dimensions = ", w, " x ", h, "<br>");
        document.write ("Gcd        = ", r, "<br>");
        document.write ("Aspect     = ", w/r, ":", h/r);
        document.write ("</pre>");
    </script>
</body></html>

它输出（在我奇怪的宽屏显示器上）：

Dimensions = 1680 x 1050
Gcd        = 210
Aspect     = 8:5

我测试过的其他人：

Dimensions = 1280 x 1024
Gcd        = 256
Aspect     = 5:4

Dimensions = 1152 x 960
Gcd        = 192
Aspect     = 6:5

Dimensions = 1280 x 960
Gcd        = 320
Aspect     = 4:3

Dimensions = 1920 x 1080
Gcd        = 120
Aspect     = 16:9

我希望我家里有最后一台，但是，不，不幸的是，它是一台工作机器。

如果您发现图形调整大小工具不支持宽高比，您该怎么做是另一回事。我怀疑最好的选择是添加信箱线（就像您在旧电视上观看宽屏电影时在旧电视的顶部和底部看到的那些线一样）。我会将它们添加到顶部/底部或侧面（无论哪一个导致信箱线数量最少），直到图像满足要求。

您可能需要考虑的一件事是图像的质量从 16:9 更改为 5:4 - 我仍然记得在引入信箱之前，我年轻时在电视上看过的令人难以置信的高瘦牛仔。您可能最好为每个长宽比准备一张不同的图像，然后根据实际屏幕尺寸调整正确的图像大小，然后再将其发送到网络上。

I gather you're looking for an usable aspect ratio integer:integer solution like 16:9 rather than a float:1 solution like 1.77778:1.

If so, what you need to do is find the greatest common divisor (GCD) and divide both values by that. The GCD is the highest number that evenly divides both numbers. So the GCD for 6 and 10 is 2, the GCD for 44 and 99 is 11.

For example, a 1024x768 monitor has a GCD of 256. When you divide both values by that you get 4x3 or 4:3.

A (recursive) GCD algorithm:

function gcd (a,b):
    if b == 0:
        return a
    return gcd (b, a mod b)

In C:

static int gcd (int a, int b) {
    return (b == 0) ? a : gcd (b, a%b);
}

int main(void) {
    printf ("gcd(1024,768) = %d\n",gcd(1024,768));
}

And here's some complete HTML/Javascript which shows one way to detect the screen size and calculate the aspect ratio from that. This works in FF3, I'm unsure what support other browsers have for screen.width and screen.height.

<html><body>
    <script type="text/javascript">
        function gcd (a, b) {
            return (b == 0) ? a : gcd (b, a%b);
        }
        var w = screen.width;
        var h = screen.height;
        var r = gcd (w, h);
        document.write ("<pre>");
        document.write ("Dimensions = ", w, " x ", h, "<br>");
        document.write ("Gcd        = ", r, "<br>");
        document.write ("Aspect     = ", w/r, ":", h/r);
        document.write ("</pre>");
    </script>
</body></html>

It outputs (on my weird wide-screen monitor):

Dimensions = 1680 x 1050
Gcd        = 210
Aspect     = 8:5

Others that I tested this on:

Dimensions = 1280 x 1024
Gcd        = 256
Aspect     = 5:4

Dimensions = 1152 x 960
Gcd        = 192
Aspect     = 6:5

Dimensions = 1280 x 960
Gcd        = 320
Aspect     = 4:3

Dimensions = 1920 x 1080
Gcd        = 120
Aspect     = 16:9

I wish I had that last one at home but, no, it's a work machine unfortunately.

What you do if you find out the aspect ratio is not supported by your graphic resize tool is another matter. I suspect the best bet there would be to add letter-boxing lines (like the ones you get at the top and bottom of your old TV when you're watching a wide-screen movie on it). I'd add them at the top/bottom or the sides (whichever one results in the least number of letter-boxing lines) until the image meets the requirements.

One thing you may want to consider is the quality of a picture that's been changed from 16:9 to 5:4 - I still remember the incredibly tall, thin cowboys I used to watch in my youth on television before letter-boxing was introduced. You may be better off having one different image per aspect ratio and just resize the correct one for the actual screen dimensions before sending it down the wire.

计算长宽比的算法是什么？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（18）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。