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

 方法一:

  1. function checkWebp() {
  2. try{
  3. return(document.createElement_x('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
  4. }catch(err) {
  5. return false;
  6. }
  7. }
  8. console.log(checkWebp()); // true or false

 原理:

HTMLCanvasElement.toDataURL()方法返回一个数据URI包含一个表示的图像格式指定的类型参数(默认为PNG)。返回的图像是在一个96 dpi的分辨率。

如果画布的高度或宽度为0,返回字符串“data:”。
如果请求类型不是image/ png图像,但返回的值以 data:image/ png,这个请求类性就不支持。
Chrome也支持image/ webp图像类型。

 方法二:

  1. var d = document;
  2. var check = function() {
  3. var supportWebp;
  4. try {
  5. var ele = d.createElement_x('object');
  6. ele.type = 'image/webp';
  7. ele.innerHTML = '!';
  8. d.body.appendChild(ele);
  9. //奇妙所在,如果浏览器支持webp,那么这个object是不可见的(offsetWidth为0),
  10. //否则就会显示出来,有可视宽度.
  11. supportWebp = !ele.offsetWidth;
  12. d.body.removeChild(ele);
  13. }catch (err) {
  14. supportWebp = false;
  15. }
  16. return supportWebp;
  17. }

 

 

你可能感兴趣的:(检测浏览器是否支持webp格式)