uniapp webp图片

### 如何在 UniApp 中使用 WebP 图片

#### 处理 WebP 图片的兼容性问题

为了确保 WebP 图片能够在不同版本的 Android 设备上正常显示，开发者需要考虑设备的操作系统版本。对于 4.2.1 及以上版本的 Android 系统，WebP 的解码和编码功能得到了全面的支持，包括带有半透明特性的 WebP 图像；而对于介于 4.0 和 4.2.1 版本之间的系统，则仅能处理完全不透明类型的 WebP 文件[^1]。

针对低于 4.0 版本的情况，默认情况下这些较老版本可能不具备对 WebP 格式的原生支持能力，在这种环境下应用可能会遇到加载失败等问题。因此建议开发人员检测当前运行环境的具体情况并据此调整资源加载逻辑，以提供最佳用户体验。

#### 实现代码示例

下面是一个简单的例子展示如何判断浏览器是否支持 WebP 并相应地切换图像源：

function supportsWebp() {
    return new Promise((resolve, reject) => {
        try {
            const elem = document.createElement('canvas');
            if (elem.getContext && elem.getContext('2d')) {
                resolve(elem.toDataURL('image/webp').indexOf('data:image/webp') === 0);
            } else {
                resolve(false);
            }
        } catch (err) {
            resolve(false);
        }
    });
}

async function setImageSrc(imgElementId, webpPath, fallbackPath) {
    let imgEl = document.getElementById(imgElementId);
    if(await supportsWebp()){
        imgEl.src = webpPath;
    }else{
        imgEl.src = fallbackPath;
    }
}

此函数 `supportsWebp` 使用 canvas API 来测试客户端是否能够正确解析 WebP 数据 URL 。如果成功返回 true 表明该端口支持 WebP ，否则则会设置为 false 或者抛出异常时也设为 false 。接着通过 `setImageSrc` 函数根据测试结果动态改变 HTMLImageElement 的 src 属性值从而实现根据不同条件加载不同的图片路径。

#### 配置 uni-app 支持 WebP

当涉及到跨平台框架如uni-app时，除了上述方法外还可以利用其内置配置项来增强应用程序对于特定格式媒体文件的支持程度。例如可以在 manifest.json 文件内的 "app-plus" 字段下加入如下选项以便更好地适配移动操作系统上的 WebP 显示需求:

{
  ...
  "app-plus": {
      ...
      "webp":true,
      ...
  },
  ...
}

这将使得打包后的 APP 更加倾向于优先选用 WebP 类型作为内部使用的图形素材之一，并自动完成必要的转码工作以适应目标平台上存在的差异性。