检测WebP支持

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

---

我认为这样的事情可能会起作用：

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';
})();

在Firefox和IE中，如果图像无法被理解，“onload”处理程序根本不会被调用，而是调用“onerror”。

您没有提到jQuery，但作为如何处理该检查异步性的示例，您可以返回一个jQuery“Deferred”对象：

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();
}

然后你可以写：

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

这是一个jsfiddle的例子。

---

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

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");
});

---

这是我的解决方案 - 大约需要6ms，我正在考虑WebP只是现代浏览器的一项功能。 使用不同的方法使用canvas.toDataUrl（）函数而不是图像作为检测特征的方式：

function canUseWebP() {
    var elem = document.createElement('canvas');

    if (!!(elem.getContext && elem.getContext('2d'))) {
        // was able or not to get WebP representation
        return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0;
    }
    else {
        // very old browser like IE 8, canvas not supported
        return false;
    }
}

---

这是一个古老的问题，但Modernizr现在支持Webp检测。

http://modernizr.com/download/

在非核心检测下查找img-webp 。

链接地址: http://www.djcxy.com/p/84075.html

上一篇: Detecting WebP support

下一篇: Detect rotation of Android phone in the browser with JavaScript