如何使用JavaScript获取图像的长宽比

Question

我需要获得原始宽高比

期望得到图像的原始长宽比

Answer 1

向“getAspectRatio()”函数传递一个 HTMLImageElement 参数。 将测量图片的实际尺寸，然后检查图片是纵向还是横向格式。 结果，该函数返回图像的长宽比。

function getAspectRatio(image) {

    const w = image.naturalWidth;
    const h = image.naturalHeight;

    let aspectRatio;

    if (w > h) {
        aspectRatio = w / h;
    } else {
        aspectRatio = h / w;
    }

    return aspectRatio;

};

Answer 2

如果您只需要知道一侧比另一侧大多少倍，那么其他选项就可以满足您的需求。但如果您想要实际的 ratio，请尝试此函数并向其传递

HTMLImageElement

。

function aspectRatio(image) {
    const height = image.naturalHeight;
    const width = image.naturalWidth;

    const gcd = (...arr) => {
        const _gcd = (x, y) => (!y ? x : gcd(y, x % y));
        return [...arr].reduce((a, b) => _gcd(a, b));
    };

    const gcdResult = gcd(width, height);

    return `${width / gcdResult}:${height / gcdResult}`;
}

注意：GCD函数不是我自己写的，我从这里偷来的。

Answer 3

试试这个：

const aspectRatio = yourImage.naturalWidth / yourImage.naturalHeight;

console.log('Aspect ratio:', aspectRatio);