iOS Safari中JavaScript WebP图片检测失效问题求助

安全阿岳

2026-7-17

解决iOS Safari下WebP检测失效的有效方案

你使用的canvas检测方法在iOS Safari中失效，核心原因是Safari的canvas.toDataURL('image/webp')行为和其他浏览器不一致——即便浏览器原生支持WebP，该API也不会返回WebP格式的Data URL，导致检测结果误判。

下面是两种经过验证的有效检测方案：

方案1：基于Image对象的异步检测（最可靠）

直接通过加载一张极小的WebP测试图，判断浏览器能否成功解码渲染，这是最准确的检测方式。

function checkWebPSupport(callback) {
  const webpTestImg = new Image();
  // 1x1像素的透明WebP图片Base64编码
  webpTestImg.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAABBxAR/Q9ERP8DAABWUDggGAAAADABAJ0BKgEAAQADADQlpAADcAD++/1QAA==';

  webpTestImg.onload = () => callback(true);
  webpTestImg.onerror = () => callback(false);
}

// 使用示例
checkWebPSupport(supported => {
  console.log(supported ? "WebP is supported" : "WebP is not supported");
});

方案2：结合Canvas与Image的验证（可选）

如果担心Base64资源的兼容性，可通过将WebP图片绘制到Canvas，验证像素数据来确认支持性：

function checkWebPSupport(callback) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const testImg = new Image();

  testImg.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAABBxAR/Q9ERP8DAABWUDggGAAAADABAJ0BKgEAAQADADQlpAADcAD++/1QAA==';

  testImg.onload = () => {
    canvas.width = testImg.width;
    canvas.height = testImg.height;
    ctx.drawImage(testImg, 0, 0);
    // 测试图为透明像素，alpha通道值为0
    const pixelAlpha = ctx.getImageData(0, 0, 1, 1).data[3];
    callback(pixelAlpha === 0);
  };

  testImg.onerror = () => callback(false);
}