front-standard-utils/src/webp.ts

前端工具库

/**
 * 检查是否支持.webp 格式图片  使用阿里CDN
 * 支持 webp ? x-oss-process=image/format,webp
 * @param {string} url OSS图片的url路径
 */

export const getWebpImg = (url: string) => {
  if (!url) {
    return url;
  }
  if (Object.prototype.toString.call(url) !== '[object String]') {
    return url;
  }
  let isWebp = false
  const cs = document.createElement('canvas');
  // 若是不支持canvas则退出
  if (cs.getContext && cs.getContext('2d')) {
    try {
      // 判断当前浏览器是否支持webo抓换
      if (cs.toDataURL('image/webp').indexOf('data:image/webp') === 0) {
        isWebp = true
      }
    } catch (e) {
      // safari 浏览器无恒模式在低于11版本会有bug
      console.error(e);
    }
  }
  if (isWebp) {
    url = url + '?x-oss-process=image/format,webp';
  }
  return url
}