0

使用js判断是否使用WebP图片显示

ic翼 2018-12-08 发布于前端 bingyishow.top

很多CDN服务商会有一个创建图片缩略图的规则。可以通过CDN设置并自动使用WebP图片。无奈我的目前没有,想要使用只好自己来配置。

使用js判断是否使用WebP图片显示

2018-12-08 发布,来源:bingyishow.top

很多CDN服务商会有一个创建图片缩略图的规则。可以通过CDN设置并自动使用WebP图片。无奈我的目前没有,想要使用只好自己来配置。

WebP图片

如果你还不知道什么是WebP图片。可以查看一下下面的示例。

1

WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器宽带资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
WebP既支持有损压缩也支持无损压缩。相较编码JPEG文件,编码同样质量的WebP文件需要占用更多的计算资源。

缺点

目前支持的游览器:Chrome、Edge;
Mozilla的Firefox和苹果的Safar目前仍不支持WebP。
所以就有了下面这个js来判断是否需要使用WebP。

js代码

  • 公共方法:用于所有img标签显示原图还是webp图片。
var checkPic = function(isWebP){
    $("img").each(function(i,v){
        var src = isWebP?$(v).attr('webppic-src'):$(v).attr('pic-src');
        $(v).attr('src',src);
    })
}
  • html代码需要准备两个属性加载图片。
<img src=&quot;&quot; pic-src=&quot;./test.jpg&quot; webppic-src=&quot;./test.webp&quot;>
  • 第一种:这里先加载一个一像素的图片。如果能获取图片的宽高。说明支持WebP。反之不支持。
var isWebP = false;
var img = new Image();
img.onload = function(){
    isWebP = !!(img.height>0 && img.width>0);
    checkPic(isWebP);
};
img.onerror = function(){
    isWebP = false;
    checkPic(isWebP);
};
img.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=';
  • 第二种:通过查看响应头和请求头相关字段,判断其Accept里是否含有 image/webp 字段,如果包含则说明支持WebP,反之则不支持。
var checkWebp = function(){
    try{
        return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
    }catch(err) {
        return  false;
    }
}
checkPic(checkWebp());

版权属于:ic翼

本文链接:https://bingyishow.top/Technical-article/71.html

您必须遵守 署名-非商业性使用-相同方式共享 CC BY-NC-SA 使用这篇文章

最后修改:2018 年 12 月 08 日 10 : 34 AM
© 著作权归作者所有
503 浏览 收藏 报告 阅读模式
载入中...