最近项目遇到webp在wkwebview上不显示的问题，众所周知，safari浏览器是不支持webp格式的图片的。
那要显示在ios的webview上显示webp格式，要如何做呢？
查阅了很多资料，集众家之所长，以下使用SDWebImage重新定向webp图片的数据源，有不足之处，还望多多指教。
首先，使用cocopods引入两个第三方库，
libwebp是用c写的一个webp相关的功能库
SDWebImage默认是不会加入WebP的库的，需要手动添加webP的路径
pod'libwebp','0.5.1'
pod'SDWebImage/WebP'
然后，在初始化你的wkweview之后，需要给NSURLProtocol注册一个自定义的类
[NSURLProtocol registerClass:[WebPURLProtocol class]];
最后一步，就是重写NSURLProtocol其中的方法了
#import "WebPURLProtocol.h"
#import <SDWebImage/UIImage+WebP.h>
#import <SDWebImage/SDWebImageManager.h>
NSString*constkWebPprefix =@"webp";
@interface WebPURLProtocol()
@property (nonatomic , strong) id <SDWebImageOperation> downOperation;
@end
@implementationWebPURLProtocol
//该方法返回YES则表示 需要进行处理，返回NO，则 不做任何处理
+ (BOOL)canInitWithRequest:(NSURLRequest*)request {
//此处由于我使用了又拍云的网址进行测试，由于webp的图片格式都会以webp作为结尾，因此需要屏蔽又拍云的官网
if([request.URL.absoluteStringhasSuffix:kWebPprefix]&&![request.URL.absoluteStringisEqualToString:@"https://www.upyun.com/webp"]) {
//如果是webp自定义协议，则不需要过滤
if([NSURLProtocolpropertyForKey:@"URLProtocolHandleKey"inRequest:request]) {
returnNO;
}
returnYES;
}
return NO;
}
//这俩方法没有变化，可以不重写
+ (NSURLRequest*)canonicalRequestForRequest:(NSURLRequest*)request {
return request;
}
+ (BOOL)requestIsCacheEquivalent:(NSURLRequest*)a toRequest:(NSURLRequest*)b {
return [super requestIsCacheEquivalent:a toRequest:b];
}//该方法中对webp图片进行相应的处理
- (void)startLoading {
// 重定向请求
NSMutableURLRequest*mRequest = [[self request]mutableCopy];
// [NSURLProtocol setProperty:@YES forKey:@"URLProtocolHandledKey" inRequest:mRequest];
self.downOperation= [[SDWebImageManager sharedManager]loadImageWithURL:[self request].URL options:0 progress:nil completed:^(UIImage*_Nullable image,NSData*_Nullable data,NSError*_Nullable error,SDImageCacheType cacheType,BOOL finished,NSURL*_Nullable imageURL) {
//拦截webp, 将webp格式转为data数据进行重定向加载
// 通知 client 收到响应
NSURLResponse *response = [[NSURLResponse alloc] initWithURL:mRequest.URL MIMEType:@"image/jpeg" expectedContentLength:data.length textEncodingName:nil];
[self.client URLProtocol:self didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageAllowed];
// 通知 client 已经加载完数据
[self.client URLProtocol:self didLoadData:UIImageJPEGRepresentation(image, 1.0f)];
// 通知 client 请求完成, 成功或者失败的处理
if(!error) {
//成功
[self.client URLProtocolDidFinishLoading:self];
}else{
//失败
[self.client URLProtocol:self didFailWithError:error];
}
}];
}
- (void)stopLoading {
// 终止任务
if ([self.downOperation conformsToProtocol:@protocol(SDWebImageOperation)]) {
[self.downOperationcancel];
}
}
至此，就完成了wkweview在webp无法显示的问题
测试地址：https://www.upyun.com/webp
补充：
有很多小伙伴经常会看到类似以下两行代码，将http和https注册到NSURLProtocol的白名单。分类的源码：NSURLProtocol的分类
[NSURLProtocol wk_registerScheme:@"http"];
[NSURLProtocol wk_registerScheme:@"https"];
但是，经过我的测试考证，我在项目中加入这两行代码后，如果项目中是以列表的形式出现webp，那么，列表会无限重复第一个数据，目前我仍然虽不明，却觉厉。因此，我在项目中并没有加上这两行。如果有大神能给予解释，求之不得。
如果有遇到问题的小伙伴，我们可以一起讨论，谢谢！
