js判断宽高比16比9的比例,4比3,Math.abs()绝对值的应用

写个js函数，判断图片、视频宽高比是不是16比9，入参是分辨率的字符串

判断宽高比例 16比9 函数示例 代码参考

function is16by9(resolution) {
    // 分割字符串，提取宽度和高度
    const [width, height] = resolution.split('x').map(Number);

    // 计算宽高比
    const ratio = width / height;

    // 判断是否为16:9
    // return ratio === 16 / 9;
    return Math.abs(ratio - 16 / 9) <= 0.01;
}
// 测试一下
console.log(is16by9('1920x1080')) // true

为什么用 Math.abs() 求绝对值函数呢？

在计算16比9画面的时候，真实的分辨率，宽除以高，不一定完全等于 16/9=1.7777777777777777 这个值。

实际上，我们有些视频的分辨率，宽除以高，就是 1.78 左右，有的是1.76左右。

因为，我们判断比例的时候，要允许一点点误差，这时候， Math.abs() 就有应用场景了。

宽高比，比1.7777大一点点，也能算作 16比9，但是不能大太多。

宽高比，比1.7777小一点点，也能算作 16比9，不要小太多就行了。

而Math.abs(x)刚刚好，做绝对值计算，如果 x 是负数（包括 -0），则返回 -x。否则，返回 x。

刚好能满足，比1.777大一点点、小一点点的判断。

为什么不直接使用 === 等于判断呢？

因为js会遇到小数点精度的问题，有时候会出现 0.1+0.2= 0.30000000000000004 的问题。

为了避免这类问题，所以不使用 === 等于判断。

详细实践代码

判断16比9、4比3、8比5、5比4的比例的代码都有。

    var list = `
    720x576
    640x360
    640x480
    720x576
    768x576
    800x600
    856x480
    960x540
    1024x576
    1024x768
    1280x1024
    1600x1200
    1280x800
    1280x960
    1280x720
    1368x680
    1440x900
    1440x1080
    1680x1050
    1920x1200
    1920x1080
    `
    var list = list.split("\n").filter(it => it)
    console.log(list.filter(is16by9));
    /* [
      "640x360",
      "960x540",
      "1024x576",
      "1280x720",
      "1920x1080"
    ] */
    console.log(list.filter(is5by4));
    /* [
      "720x576",
      "720x576",
      "1280x1024"
    ] */
    console.log(list.filter(is4by3));
    /* [
      "640x480",
      "768x576",
      "800x600",
      "1024x768",
      "1600x1200",
      "1280x960",
      "1440x1080"
    ] */
    console.log(list.filter(is8by5));
    /* [
      "1280x800",
      "1440x900",
      "1680x1050",
      "1920x1200"
    ] */
    
    function is16by9(resolution) {
        // 分割字符串，提取宽度和高度
        const [width, height] = resolution.split('x').map(Number);
    
        // 计算宽高比
        const ratio = width / height;
    
        // 判断是否为16:9
        // return ratio === 16 / 9;
        return Math.abs(ratio - 16 / 9) <= 0.001;
    }
    // 测试函数
    const resolution = "1920x1080";
    console.log(is16by9(resolution)); // 输出: true

    function is5by4(resolution) {
        // 分割字符串，提取宽度和高度
        const [width, height] = resolution.split('x').map(Number);
    
        // 计算宽高比
        const ratio = width / height;
        return Math.abs(ratio - 5 / 4) <= 0.001;
    }
    function is4by3(resolution) {
        // 分割字符串，提取宽度和高度
        const [width, height] = resolution.split('x').map(Number);
    
        // 计算宽高比
        const ratio = width / height;
        return Math.abs(ratio - 4 / 3) <= 0.001;
    }
    function is8by5(resolution) {
        // 分割字符串，提取宽度和高度
        const [width, height] = resolution.split('x').map(Number);
    
        // 计算宽高比
        const ratio = width / height;
        return Math.abs(ratio - 8 / 5) <= 0.001;
    }

以上代码，实现了：在一个数组的各种分辨率中，筛选出 16比9的分辨率、4比3的分辨率、5比4的分辨率、8比5的分辨率。

一般常见于：判断图片比例、视频比例、摄像头分辨率比例。