当前位置: 首页>数据库>正文

iOS-支持webp图片

一. 本地webp图片+网络webp图片加载

安卓原生就已经支持webp图片了,毕竟是亲儿子啊,iOS可能因为是竞争对手的原因,原生支持的不太好,所以我们要自己想办法。

首先要知道iOS14以上是支持webp图片的,不信可以自己去尝试。

由于我的项目没使用cocoapods,SDWebImage和YYImge都是本地导入的,所以下面只讲本地导入的方式如何支持webp,其实原理都是一样的。

由于SDWebImage和YYImge都支持webp图片加载,所以如果使用SDWebImage或者YYImge加载本地webp图片或者网络webp图片就会很简单,我们需要先导入WebP.framework(WebP.framework是我从YYKit里面找的),然后对于SDWebImage还要在BuildSetting - preprocessorMacros 里面添加SD_WEBP=1,如下:

iOS-支持webp图片,第1张

至于为什么要这么操作,直接看一下SDWebImage和YYImge源码就行了。

这样之后使用SDWebImage和YYImge就可以加载本地webp图片和网络webp图片了。Demo在文末。

二. WKWebview支持webp图片

iOS14以下WKWebview是不支持webp图片的,如果想要WKWebview支持webp图片,我们的思路是:拦截网页的请求,如果请求是webp图片,就使用我们自己的请求去处理,拿到webp图片数据后,再使用SDWebimage转成png图片数据,然后再调用原来的请求,将png图片数据传递回去。

拦截网页的请求你肯定会想到NSURLProtocol,但是NSURLProtocol只支持NSURLSession、NSURLConnection、UIWebview,不支持WKWebview,但是网上有大神找到了可以通过注册Scheme的方式,强行让NSURLProtocol支持WKWebview。

[NSURLProtocol wk_registerScheme:@"http"];
[NSURLProtocol wk_registerScheme:@"https"];

通过这样的方式我们可以做到让WKWebview支持webp图片,但是有一个很大的弊端:Ajax的请求body为空。

如何解决Ajax的请求body为空的问题?

上面注册Scheme,我们不注册http、https了,我们注册一个自定义的Scheme,如下:

[NSURLProtocol wk_registerScheme:@"webphttp"]; //相当于http
[NSURLProtocol wk_registerScheme:@"webphttps"]; //相当于https

然后需要服务端配合,将webp图片地址的Scheme改成webphttp、webphttps,如下:

webphttps://pavo.elongstatic.com/i/mobile750_448/KhelRY5S80.webp

然后客户端拦截的时候,如果发现有webp前缀,就截取并删除webp前缀,其他的就和上面一样了。

详细代码地址:webp的Demo


https://www.xamrdz.com/database/68r1997379.html

相关文章: