webp图片格式前端兼容与显示处理以及其图片原始数据的获取

最新推荐文章于 2024-04-30 23:40:28 发布

nongshuqiner

最新推荐文章于 2024-04-30 23:40:28 发布

阅读量7.2k

点赞数 1

分类专栏： web前端文章标签：前端WebP图片处理 webpjs使用 webp图片兼容 webp图片获取信息

本文链接：https://blog.csdn.net/nongshuqiner/article/details/78792243

版权

前言

不管是 PC 还是移动端，图片一直是流量大头，以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求，如何保证在图片的精细度不降低的前提下缩小图片体积，成为了一个有价值且值得探索的事情。

但如今对于 JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致，若想改变现状开辟新局面，便要有釜底抽薪的胆量和气魄，而 Google 给了我们一个新选择：WebP。

对 WebP 的研究缘起于手机 QQ 原创表情商城，由于表情包体积较大，在 2G/3G 的网络环境下加载较慢。于是催生了其诞生，今年 WebP 图片格式得到越来越多的关注，很多团队也开始布道，前阵子的前端圈“走进腾讯互娱前端技术专场”也有相关专题。

关于更多webp的信息可以参考：WebP 探寻之路

这样一个可以减少图片体积又不影响画质的图片格式，在手机端Android和iOS的App只要引入Google提供的解码库，都可以很轻松的支持WebP格式。不过在Web上，在使用中却有相关问题，最大的问题就是不兼容，火狐完全不支持。谷歌和欧朋等支持较好。

这意味着我们前端又要为该死的兼容考虑了。

解决方法：

本人觉得最佳的解决方法是：使用JS解码WebP图片

既然WebP的解码器是开源的，那么能否用JS来实现呢？当然可以，有人就用JS写出了WebP的解码器。引入这个JS库，就是将所有的WebP图片用JS解码后转换为Base64，然后替换掉原来的URL，这样就可以让原本不支持WebP的浏览器正常显示WebP了。这个库的使用方法非常简单，看网页的说明即可。

这里为大家放上这个库的地址官网地址：webp.js，和github下载地址：webpjs

这种方法的缺点是，因为JS要解码WebP图片，需要在此异步请求SRC中的URL（不过因为图片本身之前被下载了一次，直接使用了缓存）；而且JS解码比较慢，对性能有影响，可能需要一段时间才能显示出图片来。但图片体积的缩小可以很好的对这个JS解码时间进行对冲。

我们在github的webpjs 下载地址把webpjs 下载下来，然后引入webpjs.min.js，使用很简单只需要引入即可，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="webpjs-master/webpjs-0.0.2.min.js"></script>
    <script type="text/javascript" src="exif.js"></script>
  </head>
  <body>
<img src="lB3O1WmG5M0JxM0GhA_1668_2500.webp">
  </body>
</html>

引入后，他就可以兼容火狐了，其本质是通过使用JS解码WebP图片的，放上截图：

JS解码WebP图片

我们可以看到src是base64码。是不是很简单？

webp图片信息的获取

开始前请在github上下载我的项目：webp-ArrayBuffer，然后里面有一个文件是：lB3O1WmG5M0JxM0GhA_1668_2500.webp，这是我们IOS工程师处理过得webp图片，你们可以拿来做案例。

有时我们需要获取图片的原始数据信息，例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。

我们一般使用exif.js来获取图片的原始数据信息，github下载exif.js，然后使用<script type="text/javascript" src="exif.js"></script>引入exif.js，如果你有npm环境可以使用npm install exif-js --save进行安装。而且它的语法也特别简单。

虽然 Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展，但是图片转换为webp后由于webp自身原因在IOS等手机上写入信息并不现实，太过与繁琐与难缠，这样 Exif.js 无法获取原始数据。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="webpjs-master/webpjs-0.0.2.min.js"></script>
    <script type="text/javascript" src="exif.js"></script>
  </head>
  <body>
<img src="lB3O1WmG5M0JxM0GhA_1668_2500.webp" onclick="exif()"

最低0.47元/天解锁文章

nongshuqiner

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
webp图片格式前端兼容与显示处理以及其图片原始数据的获取

前言不管是 PC 还是移动端，图片一直是流量大头，以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求，如何保证在图片的精细度不降低的前提下缩小图片体积，成为了一个有价值且值得探索的事情。但如今对于 JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致，若想改变现状开辟新局面，便要有釜底抽薪的胆量和气魄，而 Google 给了我们一个新选择：WebP。对
复制链接

扫一扫