如何使用JavaScript检测浏览器是否支持Webp图像格式

本文概述

• 标准JavaScript
• ES2017
• 冗余？我想是的。

WebP图像格式众所周知, 可为网络上的图像提供出色的无损和有损压缩。使用WebP, 网站管理员和Web开发人员可以创建更小, 更丰富的图像, 从而使Web变得异常快。与PNG相比, WebP无损图像的尺寸要小26％。在同等的SSIM质量指数下, WebP有损图像比同类JPEG图像小25-34％。有关此格式的更多信息, 请确保在此处阅读Google Developers的介绍。到目前为止, 你无法使用预定义的方法来验证浏览器是否支持JavaScript格式, 但是你可以使用一些技巧来创建自己的方法。

验证Plain JavaScript是否支持webp格式的逻辑如下：首先需要一个base64字符串, 其中包含一些webp格式的图像, 在这种情况下, 我们将使用此格式已经有1px的白色图像, 则需要将该字符串转换为Blob。有多种方法可以将base64字符串转换为blob, 但是最简单的方法之一是使用浏览器中提供的fetch API, 然后从中调用blob方法。这已经是一个斑点, 可以由浏览器的createImageBitmap函数解释。 createImageBitmap方法在窗口和辅助程序中都存在于全局变量中。它接受各种不同的图像源, 并返回解析为ImageBitmap的Promise。

在本文中, 我们将与你分享2种方法, 这些方法将帮助你验证浏览器是否支持具有不同JavaScript版本的这种格式。

标准JavaScript

将典型方法与随处可见的回调一起使用(只要支持fetch API)

function WebpIsSupported(callback){
    // If the browser doesn't has the method createImageBitmap, you can't display webp format
    if(!window.createImageBitmap){
        callback(false);
        return;
    }

    // Base64 representation of a white point image
    var webpdata = 'data:image/webp;base64, UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';

    // Retrieve the Image in Blob Format
    fetch(webpdata).then(function(response){
        return response.blob();
    }).then(function(blob){
        // If the createImageBitmap method succeeds, return true, otherwise false
        createImageBitmap(blob).then(function(){
            callback(true);
        }, function(){
            callback(false);
        });
    });
}

然后, 你可以使用如下方法：

// You can run the code like !
WebpIsSupported(function(isSupported){
    if(isSupported){
        console.log("Supported");
    }else{
        console.log("Not supported");
    }
});

ES2017

使用ECMAScript 2017, 你可以使用异步函数而不是回调来简化所有先前的代码：

async function WebpIsSupported() {
    // If the browser doesn't has the method createImageBitmap, you can't display webp format
    if (!self.createImageBitmap) return false;
  
    // Base64 representation of a white point image
    const webpData = 'data:image/webp;base64, UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';
    
    // Retrieve the Image in Blob Format
    const blob = await fetch(webpData).then(r => r.blob());

    // If the createImageBitmap method succeeds, return true, otherwise false
    return createImageBitmap(blob).then(() => true, () => false);
}

你可以测试是否支持该格式, 例如：

// You can run your code like
(async () => {
    if(await WebpIsSupported()) {
        console.log('Is Supported');
    } else {
        console.log("Isn't supported");
    }
})();

冗余？我想是的。

尽管到目前为止, 除了优化应用程序上的图像加载之外, 我们还没有一个真正的用例, 但此实现更具参考价值, 因为它可以提供一种如何轻松检查浏览器是否支持该格式的想法。初始代码段(标准JavaScript)上最有趣的是, 如果你将代码段包含在应用程序中并且可以在较旧的浏览器上运行, 则还需要检查是否支持fetch API和转换该代码段的其他方法。 base 64字符串转换为blob, 然后将该blob与createImageBitmap方法一起使用。检查fetch API是否受支持或对其使用polyfill将导致另一个依赖关系, 即对Promises的支持。

编码愉快！