iOS - 让你的工程支持 WebP 格式图片

一、通过 SDWebImage 三方图片加载库实现

1、通过 CocoaPods 方式

在工程的 podfile 中添加

Object-C
1
2
pod 'SDWebImage'
pod 'SDWebImage/WebP'

注意:
因为 libwebp(0.5.1)是谷歌的库,下载需要翻墙。通常会报以下错误,如果确实下不下来,只能通过手动方式导入相关库了:

2、手动导入方式

1、将 SDWebImage(4.1.0)拖入到工程,如下图:

2、下载 libwebp 库(需要翻墙)
我下的版本是 0.5.1 没有打包成 framework,所以我把自己也尝试将库文件打包成静态 framework,打包出来目录如下:

3、 设置 target->build setting->搜索preprocessor 添加 SD_WEBP=1,如下图:

好了,配置已经完成,现在工程已经支持WebP显示了,我的项目里都是加载的网络 WebP 格式图片,我写了一个 WebPDemo_Method1 能够显示本地 WebP 图片。在我的电脑能翻墙的时候也把其他版本的 libwebp 库(libwebp_V0.5.1、ibwebp_V0.5.2、libwebp_V0.6.0)下了下来,0.5.1是我自己打的包,另外两个版本是官方打好的包,有需要的可以自行下载相应的版本。
注意
1、导入工程的 libwebp 库,不一定非要 framework,也可以就把相应的库文件导入到工程,只需要注意头文件导入名称就可以了。
2、demo 中,我并没有用 SDWebImage(4.1.0)的原 UIImage+WebP.hUIImage+WebP.m 文件,而是对头文件做了一定修改,如果工程用最新的 SDWebImage 报错,可以用我 demoUIImage+WebP 文件下的两个文件。

报错解决

1、我自己打的静态库 framework 在工程运行时报错,因为 framework 用到了系统的库。

1
--include of non-modular header inside XXXX

解决办法是:Allow Non-modular includes in Framework Modules 设置为 YES,如下图:

重新运行工程,没有报错,可以正常显示WebP格式图片了。

二、通过YYWebImage

最近在看 YYKit 组件的时候,发现 YYWebImage 也支持 webp 格式片,集成使用也相当方便。

1、CocoaPods导入

Object-C
1
2
pod 'YYWebImage'
pod 'YYImage/WebP`

2、手动导入

将YYWebImage和vendor文件夹拖入到工程。

具体使用

导入头文件

Object-C
1
2
3
#import "YYWebImage.h"

#import <YYWebImage.h>

设置图片地址

Object-C
1
2
3
4
5
    /** << 1、本地加载 > */
// NSString *path = [[NSBundle mainBundle] pathForAuxiliaryExecutable:@"test.webp"];
// _imageView.yy_imageURL = [NSURL fileURLWithPath:path];
/** << 2、网络加载 > */
_imageView.yy_imageURL = [NSURL URLWithString:@"https://user-gold-cdn.xitu.io/2017/12/28/1609d17b5af17a56?w=534&h=300&f=webp&s=39334"];

好了,通过 YYWebImage 也实现了 webp 格式图片的显示,要查看更多 YYWebImage 的用法,可以到 GitHub 上查看使用文档。顺便也贴出测试 WebPDemo_Method2

总结:
当然,支持WebP显示的方法也不止通过三方库的方式,也可以通过webView方式,还可以通过NSURLProtocol方式,如果需要用到以上两种方式,可以自行研究一下。如果大家有更好的方法或者建议,欢迎大家一起讨论。

------本文结束 感谢阅读------

本文地址:http://kaaaaai.cn/articles/iOS-Make-your-project-support-WebP.html
本文基于 知识共享署名-相同方式共享 4.0 国际许可协议发布
转载请注明出处,谢谢!

众筹项目:拯救世界!
0%