webp图片处理

替换图片为webp

function imgUrl2Webp(imgUrl) {
    const suffix = `(bmp|jpg|png|tif|gif|pcx|tga|exif|fpx|svg|psd|cdr|pcd|dxf|ufo|eps|ai|raw|WMF|webp|jpeg)`
    const regular = new RegExp(`\.${suffix}$`)
    try{
        return imgUrl.replace(regular, ".webp")
    }catch(err){
        return imgUrl
    }
}

判断浏览器是否兼容webp

通过canvas（前端）

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

isSupportWebp()
</script>

官方方法（前端）

第一个参数feature可以传 lossy,lossless,alpha,animation中的一个，第一个传个回调函数。获取他result。如果支持，返回ture,否则返回false。可以再谷歌和IE下试试，谷歌返回ture，IE返回false

<script>
function check_webp_feature(feature, callback) {
    const kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    
    const img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}

// 使用
check_webp_feature('lossless',function(feature, result){
    // 这里是一个全局回调，如果成功，可以在localstore里面写入一个全局状态
    // 或者其他任何方式进行支持记录
    document.getElementById("msg").innerHTML = "isSupportWebp: " + result;
});
</script>

生成一个临时图片检查（前端）

<script>
//备注，JS 代码比如放在<div id="msg"></div> 下方，
//如果放在上方在 Safari 下报错，在chrome下不报错

const supportsWebp = ({ createImageBitmap, Image }) => {
  if (!createImageBitmap || !Image) return Promise.resolve(false);

  return new Promise(resolve => {
      const image = new Image();
      image.onload = () => {
          createImageBitmap(image)
              .then(() => {
                  resolve(true);
              })
              .catch(() => {
                  resolve(false);
              });
      };
      image.onerror = () => {
          resolve(false);
      };
      image.src = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
  });
};

const webpIsSupported = () => {
  let memo = null;
  return () => {
      if (!memo) {
          memo = supportsWebp(window);
      }
      return memo;
  };
};

webpIsSupported()().then(res => {
    //console.log("是否支持 webp", res)
    document.getElementById("msg").innerHTML = "是否支持 webp: " + res;
}).catch(err => {
    //console.log(err)
    document.getElementById("msg").innerHTML = "err: " + err;
})

</script>

通过请求头（后端）

检查浏览器发送的请求头是否带有

Accept: image/webp