js检测浏览器是否支持webp格式

1、canvas检测

// canvas检测
const isSupportWebp = () => {
  try {
    const img = document.createElement('canvas');
    const imgData = img.toDataURL('image/webp', 0.5)
    return imgData.indexOf('data:image/webp') === 0;
  } catch(err) {
    return false;
  }
}

2、通过Image检测

function check_webp(callback) {
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(result);
    };
    img.onerror = function () {
        callback(false);
    };
    img.src = 'data:image/webp;base64,' + 'webp格式的1x1的白色背景图';
}

3、http请求头的Accept字段中是否包含 image/webp检测