Несколько решений, чтобы определить, поддерживает ли браузер webp

JavaScript

Мы все знаем, что WebP — это формат изображения WebP, запущенный Google.Это формат файла изображения, который поддерживает сжатие с потерями и сжатие без потерь.Согласно тестам Google, одно и то же изображение, изображение в формате WebP можно сравнить с форматами PNG и JPG. изображений.Это экономит много объема, но его совместимость не очень хорошая, а именно:

Итак, нам нужно выполнить некоторую обработку совместимости, так как же определить, поддерживает ли браузер webp? Ниже приведены несколько методов для справки.

метод первый

Используйте toDataURL холста, чтобы судить

Метод toDataURL объясняется в MDN следующим образом:

Метод HTMLCanvasElement.toDataURL() возвращает URI данных, содержащий отображаемое изображение. Тип можно использовать с параметром type, который по умолчанию имеет формат PNG. Разрешение картинки 96dpi.

  • Если высота или ширина холста равна 0, возвращается строка «данные:».
  • Если входящий тип не "image/png", но возвращаемое значение начинается с "data:image/png", то входящий тип не поддерживается.
  • Chrome поддерживает тип «image/webp».

Метод toDataURL преобразует изображение в DOMString, содержащую dataURI, и определяет, что значением типа изображения перед кодировкой base64 является image/webp.

Например, в Google Chrome используйте метод toDataURL для преобразования в image/webp:

Преобразование в изображение/webp с помощью метода toDataURL в браузере Safari:

Можно обнаружить, что при выполнении toDataURL в браузере, не поддерживающем webp, получаемый тип изображения не является webp, поэтому можно судить по этому.

Реализация:

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

isSupportWebp()

Способ второй

На стороне сервера определите, поддерживает ли браузер webp, по информации из заголовка запроса.

Заголовок изображения запроса в Google Chrome выглядит следующим образом:

Заголовок изображения запроса браузера IE выглядит следующим образом:

Когда запрос изображения отправлен, в заголовках запроса есть Accept, и сервер может определить, есть ли изображение/webp в Accept.

Способ третий

Судите по загрузке изображения webp

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)
}).catch(err => {
    console.log(err)
})

Этот метод загружает фоновое изображение белого квадрата 1x1, чтобы проверить, поддерживает ли браузер webp.

Протестируйте код в Google:

Протестируйте код в Firefox:

Протестируйте код в Safari:

Официальные документы Google обрабатываются следующим образом (сначала загрузите изображение WebP, если вы можете получить ширину и высоту изображения, это означает, что WebP поддерживается, в противном случае оно не поддерживается):

function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var 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];
}

Ссылаться на

Категории