检测WebP支持 [英] Detecting WebP support

问题描述

如何通过Javascript检测对WebP的支持？如果可能的话，我想使用功能检测而不是浏览器检测，但我找不到这样做的方法。 Modernizr（ www.modernizr.com ）不检查它。

  var hasWebP = <解析方案

假;
（function（）{
var img = new Image（）;
img.onload = function（）{
hasWebP = !!（img.height> 0& & img.width> 0）;
};
img.onerror = function（）{
hasWebP = false;
};
img.src = 'http://www.gstatic.com/webp/gallery/1.webp';
}）（）;


在Firefox和IE中，onload处理函数根本不会被调用不能被理解，而是调用onerror。

你没有提到jQuery，但作为一个例子来说明如何处理异步的本质检查你可以返回一个jQueryDeferred对象：

 函数hasWebP（）{
 var rv = $。递延（）; 
 var img = new Image（）; 
 img.onload = function（）{rv.resolve（）; }; 
 img.onerror = function（）{rv.reject（）; }; 
 img.src ='http://www.gstatic.com/webp/gallery/1.webp'; 
 return rv.promise（）; 
} 
  

然后你可以这样写：
$ b $函数（）{
// ...代码来利用WebP ...
}，函数（） {
// ...处理缺少WebP的代码...
}）;

这是一个jsfiddle示例。

---

更高级的检查器： http://jsfiddle.net/JMzj2/29/ 。这个从数据URL加载图像并检查它是否成功加载。由于WebP现在也支持无损图像，因此您可以检查当前浏览器是否支持有损WebP或无损WebP。 （注意：这隐含地检查数据URL支持。）

  var hasWebP =（function（）{
 / /一些小的（2x1像素）测试图像为每个功能
 var images = {
 basic：data：image / webp; base64，UklGRjIAAABXRUJQVlA4ICYAAACyAgCdASoCAAEALmk0mk0iIiIiIgBoSygABc6zbAAA / v56QAAAAA ==，
 lossless：data ：image / webp; base64，UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ // 73v / + BiOh / AAA =
; 
 
返回函数（特征）{
 var deferred = $ .Deferred（） ; 
 $ b $（< img>）。on（load，function（）{
 //图像应该有这些尺寸
 if（this.width === 2&& this.height === 1）{
 deferred.resolve（）; 
} else {
 deferred.reject（）; 
} $ （）;} $ {
}）。on（error，function（）{
 deferred.reject（）; 
}）。attr（src，images [feature ||basic]）; 
 
返回def erred.promise（）; 
} 
}）（）; 
 
 var add = function（msg）{
 $（< p>）.text（msg）.appendTo（＃x）; 
}; 
 
 hasWebP（）。then（function（）{
 add（Basic WebP available）; 
}，function（）{
 add（Basic WebP * not * available）; 
}）; 
 
 hasWebP（lossless）。then（function（）{
 add（Lossless WebP available）; 
}，function（）{
 add Lossless WebP * not * available）; 
}）; 
  

How can I detect support for WebP via Javascript? I'd like to use feature detection rather than browser detection if possible, but I can't find a way to do so. Modernizr (www.modernizr.com) doesn't check for it.

解决方案

I think something like this might work:

var hasWebP = false;
(function() {
  var img = new Image();
  img.onload = function() {
    hasWebP = !!(img.height > 0 && img.width > 0);
  };
  img.onerror = function() {
    hasWebP = false;
  };
  img.src = 'http://www.gstatic.com/webp/gallery/1.webp';
})();

In Firefox and IE, the "onload" handler just won't be called at all if the image can't be understood, and the "onerror" is called instead.

You didn't mention jQuery, but as an example of how to deal with the asynchronous nature of that check you could return a jQuery "Deferred" object:

function hasWebP() {
  var rv = $.Deferred();
  var img = new Image();
  img.onload = function() { rv.resolve(); };
  img.onerror = function() { rv.reject(); };
  img.src = 'http://www.gstatic.com/webp/gallery/1.webp';
  return rv.promise();
}

Then you could write:

hasWebP().then(function() {
  // ... code to take advantage of WebP ...
}, function() {
  // ... code to deal with the lack of WebP ...
});

Here is a jsfiddle example.

---

A more advanced checker: http://jsfiddle.net/JMzj2/29/. This one loads images from a data URL and checks whether it loads successfully. Since WebP now also supports lossless images, you could check whether the current browser supports just lossy WebP or also lossless WebP. (Note: This implicitly also checks for data URL support.)

var hasWebP = (function() {
    // some small (2x1 px) test images for each feature
    var images = {
        basic: "data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAACyAgCdASoCAAEALmk0mk0iIiIiIgBoSygABc6zbAAA/v56QAAAAA==",
        lossless: "data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ//73v/+BiOh/AAA="
    };

    return function(feature) {
        var deferred = $.Deferred();

        $("<img>").on("load", function() {
            // the images should have these dimensions
            if(this.width === 2 && this.height === 1) {
                deferred.resolve();
            } else {
                deferred.reject();
            }
        }).on("error", function() {
            deferred.reject();
        }).attr("src", images[feature || "basic"]);

        return deferred.promise();
    }
})();

var add = function(msg) {
    $("<p>").text(msg).appendTo("#x");
};

hasWebP().then(function() {
    add("Basic WebP available");
}, function() {
    add("Basic WebP *not* available");
});

hasWebP("lossless").then(function() {
    add("Lossless WebP available");
}, function() {
    add("Lossless WebP *not* available");
});

这篇关于检测WebP支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！