检测 WebP 支持

javascript html image webp

2022-08-30 04:54:10

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

答案 1

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

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

答案 2

我认为这样的东西可能会起作用：

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“延迟”对象：

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