webView显示图片问题 - iOS

前言

最近开发WKWebView的时候，突然发现了一个很奇怪的Bug，那就是webView的图片有的显示，有的图片又不显示。一开始我以为是图片的文件路径有问题，但是我看了下安卓的webView，却能正常显示，这就让我很纳闷了。我查阅了很多网上的资料才知道是图片的格式问题，在2010年谷歌推出了webP图片格式（一种比JPEG格式更节约空间，为服务器节省空间），所以怪不得Android可以完美的显示了。目前iOS的webView（包括UIWebView、WKWebView）暂不支持webP格式，不知道以后是否可以支持。虽说iOS本来不支持，但是需求就是要这样，只好去实现一下吧！！！

实现

主要思路

    注册—>拦截—>转发—>回调—>结束

在webView下载图片之前拦截下载，将拦截的请求使用NSURLConnection(也可以使用NSURLSession)加载数据，然后利用SDWebImage中UIImage+WebP提供加载webp图片的能力，并将加载好的UIImage转化为NSData返回，实现webp图片的加载

开搞

第一步：

1、先现在下载SDWebImage里面的UImage+Webp文件，但是当你打开SDWebImage文件，发现根本就没有，就算你要 pod'SDWebImage/WebP'，也会报错误
方案一：直接使用我demo的源码，当然这是最快速的方法
方案二：这个是一位博主写的 解决方案，主要是利用翻墙原理下载源码，可以参考一下
2、直接pod 'SDWebImage' , 然后把我的【YJWKWebView-WebP文件夹】直接拖入你的工程

直接导入.png

3、command + B ,你会发现直接报错了
打开build Settings -> preprocessor Macros - > 添加SD_WEBP=1
再次command +Ｂ就会神奇的发现编译成功了

操作步骤.png

拓展

不一定要用SDWebImage加载图片的，也可以使用YYWebImage（不需要翻墙），由于项目之前就使用SDWebImage加载图片，所以才用SDWebImage。你们可视情况而定

第二步：

到这一步基本就成功了，只要在需要使用的地方导入
#import "BAWKWebView_WebP.h"

在使用viewdidLoad中调用

[self ba_registerURLProtocol];

#pragma mark - 注册自定义 NSURLProtocol
- (void)ba_registerURLProtocol
{
    [NSURLProtocol registerClass:NSClassFromString(@"BAURLSessionProtocol")];
    // 注册registerScheme使得WKWebView支持NSURLProtocol
    [NSURLProtocol ba_web_registerScheme:@"http"];
    [NSURLProtocol ba_web_registerScheme:@"https"];
}

- (void)dealloc
{
    [NSURLProtocol unregisterClass:NSClassFromString(@"BAURLSessionProtocol")];
    // 移除 registerScheme
    [NSURLProtocol ba_web_unregisterScheme:@"http"];
    [NSURLProtocol ba_web_unregisterScheme:@"https"];
}

完成

缺陷

1、目前普通的webp格式的图片正常加载，webp动图暂不能加载

引用

1 BAHome 团队的BAWKWebView-WebP
github链接
2、Demo
github链接

有什么问题可直接私信我