如何使用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 formatif(!window.createImageBitmap){callback(false); return; }// Base64 representation of a white point imagevar webpdata = 'data:image/webp; base64, UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA='; // Retrieve the Image in Blob Formatfetch(webpdata).then(function(response){return response.blob(); }).then(function(blob){// If the createImageBitmap method succeeds, return true, otherwise falsecreateImageBitmap(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 formatif (!self.createImageBitmap) return false; // Base64 representation of a white point imageconst webpData = 'data:image/webp; base64, UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA='; // Retrieve the Image in Blob Formatconst blob = await fetch(webpData).then(r => r.blob()); // If the createImageBitmap method succeeds, return true, otherwise falsereturn createImageBitmap(blob).then(() => true, () => false); }

【如何使用JavaScript检测浏览器是否支持Webp图像格式】你可以测试是否支持该格式, 例如：

// 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的支持。
编码愉快！