浏览器是否支持webp图像的判断

本文目的主要是想记录下webp图像的兼容性判断

生成1px的正方形透明的webp图片

该步骤目的是为了获取一个1px x 1px的透明webp图片链接

js 复制代码

// 生成一个1x1的透明的WebP图片
function generateWebP() {
  const canvas = document.createElement('canvas')
  canvas.width = 1
  canvas.height = 1

  const ctx = canvas.getContext('2d')
  ctx.clearRect(0, 0, 1, 1) // 清除画布，确保透明

  const dataURL = canvas.toDataURL('image/webp')

  return dataURL
}

最后能得到一个base64链接：data:image/webp;base64,UklGRhACAABXRUJQV....

判断是否支持webp格式图片

此时刚好用上刚才获取到的图片链接

js 复制代码

function checkWebPSupport() {
  return new Promise((resolve) => {
    const img = new Image()

    img.onload = function () {
      const isSupported = img.width === 1 && img.height === 1
      resolve(isSupported)
    }

    img.onerror = function () {
      resolve(false)
    }

    // 一个 1x1 的透明 WebP 图片（Base64）
    img.src =
      'data:image/webp;base64,UklGRhACAABXRUJQVlA4WAoAAAAwAAAAAAAAAAAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZBTFBIAgAAAAAAVlA4IBgAAAAwAQCdASoBAAEAAUAmJaQAA3AA/v02aAA='
  })
}

怎么测试有没有问题

如果想具体看看实际效果，可以通过 codepen + browserstack Screenshots 2者结合进行查看

codepen 提供代码片段在线链接
browserstack Screenshots 可以对多个平台的不同浏览器进行截图

我的 codepen代码片段

我的测试结果

题外话

刚好看到了一个 Modernizr：HTML5/CSS3 的功能检测库，他主要是一个 JavaScript 库 ，主要用于 检测浏览器对 HTML5 和 CSS3 特性的支持情况

Modernizr 会在页面加载时运行，并检查浏览器是否支持各种前端新技术，比如：

HTML5 元素（如 <canvas>、<video>、<audio> 等）
CSS3 特性（如 Flexbox、Grid、动画、媒体查询等）
JavaScript API（如 geolocation、localStorage、serviceWorker 等）

它会在 window.Modernizr 对象中添加检测结果，并在 <html> 标签上加上对应的 class 名。例如：

html 复制代码

<html class="no-webgl csstransforms3d video localstorage">

比如 no-webgl 这个class就是不支持的标识，也可以 window.Modernizr.xxxx 判断