Question

看到WebP图片的惊人尺寸缩小（比无损+ alpha图片的“pngcrushed”PNG小约28％），我们希望将WebP图片提供给支持WebP的浏览器。

如果客户端的浏览器支持WebP，如何从Java webapp服务器检测到？

这里有一个关于如何从JavaScript中执行此操作的问题：

但我想知道如何用Java做到这一点。如果从Java做起，意味着在客户端调用JavaScript，那么我想知道如何做到这一点。

Answer 1

有一种在客户端上检测webP支持的简单方法。然后，您可以在客户端上设置cookie并读取服务器上的值。

function testWepP(callback) {
   var webP = new Image();     
   webP.src = 'data:image/webp;base64,UklGRi4AAABXRUJQVlA4TCEAAAAvAUAAEB8wAiMw' + 
'AgSSNtse/cXjxyCCmrYNWPwmHRH9jwMA';
   webP.onload = webP.onerror = function () {
      callback(webP.height === 2);     
   }; 
};

testWebP(function(supported) {
   console.log((supported) ? "webP 0.2.0 supported!" : "webP not supported."); 
});

更多信息here。

Answer 2

单独使用Java无法确定Web浏览器功能。 Java / JSP在webserver中运行，而不是在webbrowser中运行。你真的需要使用JavaScript。您可以使用已在相关问题上找到的代码。你能做的最简单就是让JS检查页面加载，如果还没有一些cookie存在，表明浏览器支持WebP，然后相应地进行特征检测，最后通过document.cookie设置一个长生存cookie按location.reload()重新加载页面。

在服务器端，在发送/设置适当的图像URL之前，您只需要在servlet中的HttpServletRequest#getCookies()或JSP中的${cookie}检查cookie和/或其值是否存在。

除了设置cookie之外，您始终可以让JS将数据作为ajax请求的请求参数发送，但这意味着您必须在每个请求或会话上执行此操作。

Answer 3

以上答案似乎有点旧了？看起来您可以检查Accept标头以查看其是否包含webp字符串...

   public boolean hasWebPSupport(HttpServletRequest req) {
        return req.getHeader("Accept").contains("image/webp");
    }

如何检测支持WebP的浏览器以及如何为它们提供WebP图片？

3 个答案: