iOS加载WebP格式图片小结

由于最近项目需求，需要将项目中图片的加载做到同时兼容WebP格式，对于WebP格式的兼容，主要分为两大块内容：

  • WebView中对WebP格式的加载
  • 普通的图片控件对于WebP格式的加载

经测试，如果不做任何处理，iOS是不支持对WebP格式的原生支持的。对于WebP格式的图片的加载也就需要经过一些处理才能够对其进行支持。大致原理：将服务器返回的WebP格式图片进行处理转换成控件所能识别的二进制流，然后按照普通的图片加载方式进行加载。上传给服务器的WebP格式的图片也是相同的原理。

好了，对于以上两种加载，iOS实现方式又是怎么样的呢？
实际上，SDWebImage中已经支持了WebP格式的图片，并且可以在UIImage与WebP之间进行图片的相互转换，所以对于iOS端的WebP格式图片的支持可以通过SDWebImage/WebP来支持处理。
可以通过pod 'SDWebImage/WebP'来进行安装。

普通控件加载WebP格式图片

在使用普通控件加载WebP格式图片的时候，需要SDWebImage/WebP提供的UIImage+WebP分类来进行WebP格式图片的转换：

+ (UIImage *)sd_imageWithWebPData:(NSData *)data;

在Native中使用WebP格式图片的方法

NSString *path = [[NSBundle mainBundle] pathForResource:@"logo" ofType:@"webp"];
NSData *data = [[NSData alloc] initWithContentsOfFile:path];
UIImage *img = [UIImage sd_imageWithWebPData:data];self.imageView.image = img;

如果直接在加载的时候对WebP格式图片进行支持，可以通过如下方式进行配置，即可完成SDWebImage的WebP的支持。

步骤如下：
1.工程引入SDWebImage开源库；
2.引入WebP.framework,下载地址：https://github.com/seanooi/iOS-WebP。
3.让SDWebImage支持WebP，设置如下Build Settings -- Preprocessor Macros , add SD_WEBP=1。

修改配置

这里需要注意的一点：如果按照配置发现还是不能够正常加载的话，可能是因为cocopods中的SDWebImage未能找到WebP.framework所致，此时可以将cocopods中的SDWebImage拿出来，应该就能够正常加载了。

webView对WebP格式的支持

webView对WebP格式图片的加载可以通过截获对应的图片地址来进行。具体实现可以使用NSURLProtocol 来进行UIWebVIew的网络请求判断，如果请求的内容是WebP格式的图片，那么对WebP格式图片进行转码缓存之后再进行图片的加载具体代码如下：

#import <Foundation/Foundation.h>

@class UIImage;

@protocol WEBPURLProtocolDecoder<NSObject>
- (UIImage *)decodeWebpData: (NSData *)data;
@end

@interface WEBPURLProtocol : NSURLProtocol
+ (void)registerWebP: (id <WEBPURLProtocolDecoder>)externalDecoder;
+ (void)unregister;
@end


#import <objc/message.h>
#import <UIKit/UIKit.h>
#import "WEBPURLProtocol.h"
#define UIWEBVIEW_WEBP_DEBUG

static NSString * const WebpURLRequestHandledKey = @"Webp-handled";
static NSString * const WebpURLRequestHandledValue = @"handled";
static id <WEBPURLProtocolDecoder> decoder = nil;

@interface WEBPURLProtocol () <NSURLSessionDataDelegate>
@property (atomic, copy) NSArray *modes;
@property (atomic, strong) NSThread *clientThread;
@property (atomic, strong) NSMutableData *data;
@property (atomic, strong) NSURLRequest *tmpRequest;
@property (atomic, strong) NSURLSession *session;
@end

@implementation WEBPURLProtocol

- (void)p_performBlock:(dispatch_block_t)block
{
#if defined (DEBUG) && defined (UIWEBVIEW_WEBP_DEBUG)
    NSAssert(self.modes != nil, @"UIWEBVIEW WEBP ERROR #4");
    NSAssert(self.modes.count > 0, @"UIWEBVIEW WEBP ERROR #5");
    NSAssert(self.clientThread != nil, @"UIWEBVIEW WEBP ERROR #6");
#endif
    [self performSelector:@selector(p_helperPerformBlockOnClientThread:) onThread:self.clientThread withObject:[block copy] waitUntilDone:NO modes:self.modes];
}

- (void)p_helperPerformBlockOnClientThread:(dispatch_block_t)block
{
#if defined (DEBUG) && defined (UIWEBVIEW_WEBP_DEBUG)
    NSAssert([NSThread currentThread] == self.clientThread, @"UIWEBVIEW WEBP ERROR #7");
#endif
    if(block != nil)
    {
        block();
    }
}

+ (void)registerWebP: (id <WEBPURLProtocolDecoder>)externalDecoder {
#if defined (DEBUG) && defined (UIWEBVIEW_WEBP_DEBUG)
 NSAssert([NSThread isMainThread], @"UIWEBVIEW WEBP ERROR #8");
    NSAssert(externalDecoder != nil, @"UIWEBVIEW WEBP ERROR #10");
    NSAssert([externalDecoder respondsToSelector:@selector(decodeWebpData:)], @"UIWEBVIEW WEBP ERROR #12");
#endif
    decoder = externalDecoder;
 [NSURLProtocol registerClass:self];
}

+ (void)unregister {
#if defined (DEBUG) && defined (UIWEBVIEW_WEBP_DEBUG)
    NSAssert([NSThread isMainThread], @"UIWEBVIEW WEBP ERROR #9");
#endif
 [self unregisterClass:self];
}

+ (BOOL)canInitWithRequest:(NSURLRequest *)request {
    
    if (!request) {
        return NO;
    }
    
    if (!request.URL) {
        return NO;
    }
    
    if (!request.URL.absoluteString) {
        return NO;
    }
    
    NSString * const requestURLPathExtension = request.URL.pathExtension.lowercaseString;

    if (!requestURLPathExtension) {
        return NO;
    }
    
    BOOL webpExtension = NO;
    
    if ([@"webp" isEqualToString:requestURLPathExtension]) {
        webpExtension = YES;
    }
    
    if (webpExtension == NO) {
        return NO;
    }
    
    if ([self propertyForKey:WebpURLRequestHandledKey inRequest:request] == WebpURLRequestHandledValue) {
        return NO;
    }
    
    NSString *scheme = request.URL.scheme;
    
    if (!scheme) {
        return NO;
    }
    
    scheme = [scheme lowercaseString];
    
    if (!scheme) {
        return NO;
    }
    
    if (([@"http" isEqualToString:scheme] == NO) && ([@"https" isEqualToString:scheme] == NO)) {
        return NO;
    }
    
 request = [self webp_canonicalRequestForRequest:request];
 return [NSURLConnection canHandleRequest:request];
}

+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request {
 return [self webp_canonicalRequestForRequest:request];
}

+ (NSURLRequest *)webp_canonicalRequestForRequest:(NSURLRequest *)request {
 NSURL *url = request.URL;
 NSMutableURLRequest * const modifiedRequest = [[NSMutableURLRequest alloc] initWithURL:url cachePolicy:request.cachePolicy timeoutInterval:request.timeoutInterval];
    NSString *mimeType = @"image/webp";
 [modifiedRequest addValue:mimeType forHTTPHeaderField:@"Accept"];
 [self setProperty:WebpURLRequestHandledValue forKey:WebpURLRequestHandledKey inRequest:modifiedRequest];
 return modifiedRequest;
}

- (id)initWithRequest:(NSURLRequest *)request cachedResponse:(NSCachedURLResponse *)cachedResponse client:(id<NSURLProtocolClient>)client {
 if ((self = [super initWithRequest:request cachedResponse:cachedResponse client:client])) {
  request = [self.class canonicalRequestForRequest:request];
        self.tmpRequest = request;
 }
 return self;
}

- (void)dealloc {
    [self.session invalidateAndCancel];
}

- (void)URLSession:(NSURLSession *)session dataTask:(NSURLSessionDataTask *)dataTask didReceiveResponse:(NSURLResponse *)response completionHandler:(void (^)(NSURLSessionResponseDisposition disposition))completionHandler {
    NSHTTPURLResponse * const httpResponse = [response isKindOfClass:[NSHTTPURLResponse class]] ? (NSHTTPURLResponse *)response : nil;
    
    if (httpResponse.statusCode != 200) {
        completionHandler(NSURLSessionResponseCancel);
        [self p_performBlock:^{
            [self.client URLProtocol:self didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageAllowed];
        }];
        return;
    }
    
    completionHandler(NSURLSessionResponseAllow);
    [self p_didReceiveResponsefromCache:NO expectedLength:response.expectedContentLength];
}

-(void)URLSession:(NSURLSession *)session dataTask:(NSURLSessionDataTask *)dataTask
   didReceiveData:(NSData *)data {
    [self.data appendData:data];
}

- (void)URLSession:(NSURLSession *)session task:(NSURLSessionTask *)task
didCompleteWithError:(NSError *)error {
    if (error) {
        [self p_performBlock:^{
            [self.client URLProtocol:self didFailWithError:error];
        }];
    }
    else {
        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
            NSError *error = [NSError errorWithDomain:@"Webp_UIWebView_ERROR_DOMAIN" code:1 userInfo:@{}];
            UIImage *image = [decoder decodeWebpData:self.data];
            if (!image) {
                [self p_performBlock:^{
                    [self.client URLProtocol:self didFailWithError:error];
                }];
                return;
            }
            NSData *imagePngData = UIImagePNGRepresentation(image);
            [self p_performBlock:^{
                [self.client URLProtocol:self didLoadData:imagePngData];
                [self.client URLProtocolDidFinishLoading:self];
            }];
        });
    }
}

- (void)p_startConnection {
    [self p_performBlock:^{
        self.session = [NSURLSession sessionWithConfiguration:[NSURLSessionConfiguration defaultSessionConfiguration] delegate:self delegateQueue:nil];
        NSURLSessionDataTask *task = [self.session dataTaskWithRequest:self.tmpRequest];
        [task resume];
    }];
}

- (void)startLoading {
    NSMutableArray *calculatedModes;
    NSString *currentMode;
    calculatedModes = [NSMutableArray array];
    [calculatedModes addObject:NSDefaultRunLoopMode];
    currentMode = [[NSRunLoop currentRunLoop] currentMode];
    if ( (currentMode != nil) && ! [currentMode isEqual:NSDefaultRunLoopMode] ) {
        [calculatedModes addObject:currentMode];
    }
    self.modes = calculatedModes;
#if defined (DEBUG) && defined (UIWEBVIEW_WEBP_DEBUG)
    NSAssert([self.modes count] > 0, @"UIWEBVIEW WEBP ERROR #11");
#endif
    self.clientThread = [NSThread currentThread];
    [self p_startConnection];
}

- (void)stopLoading {
    [self.session invalidateAndCancel];
}

- (void)p_didReceiveResponsefromCache: (BOOL)fromCache expectedLength: (long long)expectedLength{
    NSString *contentType = @"image/png";
    NSDictionary * const responseHeaderFields = @{
                                                  @"Content-Type": contentType,
                                                  @"X-Webp": @"YES",
                                                  };
    
    NSURLRequest * const request = self.request;
    NSHTTPURLResponse * const modifiedResponse = [[NSHTTPURLResponse alloc] initWithURL:request.URL statusCode:200 HTTPVersion:@"1.0" headerFields:responseHeaderFields];
    
    if (!fromCache) {
        if (expectedLength > 0) {
            self.data = [[NSMutableData alloc] initWithCapacity:expectedLength];
        } else {
            self.data = [[NSMutableData alloc] initWithCapacity:50 * 1024];// Default to 50KB
        }
    }
    [self p_performBlock:^{
        [self.client URLProtocol:self didReceiveResponse:modifiedResponse cacheStoragePolicy:NSURLCacheStorageAllowed];
    }];
}

@end

使用WebURLProtocol前需要提前注册，通常在AppDelegate中 **- (BOOL)application:(UIApplication )application didFinishLaunchingWithOptions:(nullable NSDictionary )launchOptions;中就行注册。

注册例子如下：

[NSURLProtocol registerClass:[WEBPURLProtocol class]];

这样做的好处就是不影响webView其他功能代码下，添加了对WebP格式图片的支持。

参考：
http://blog.devzeng.com/blog/ios-webp-usage.html
https://isux.tencent.com/introduction-of-webp.html
http://blog.csdn.net/shenjx1225/article/details/47259701

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,254评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,875评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,682评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,896评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,015评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,152评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,208评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,962评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,388评论 1赞 304
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,551评论 4赞 335
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,186评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2赞 351

推荐阅读更多精彩内容