从零开始打造一个iOS图片加载框架(一)

从零开始打造一个iOS图片加载框架(一)

IOS小彩虹2021-08-20 2:20:34240A+A-

一、前言

目前比较流行的图片加载框架主要包括:SDWebImageYYWebImagePINRemoteImage等。这里也有篇文章,很好地介绍了三个框架的优缺点:YYWebImage,SDWebImage和PINRemoteImage比较

关于打造一个iOS图片加载框架的原因

  • 锻炼自己的架构能力
  • 虽然读过上面优秀框架的相关源码,但读的过程中总是容易忽略很多实现细节,以及读完之后很难获取到真正自己所需要的内容
  • 加深自己对iOS图片加载相关方面的理解

二、图片的加载

1. 图片的简单加载

我们先从最简单的角度去看待加载一个网络图片,无非是经历:下载图片->显示图片这么个过程。

- (void)downloadImage {
    NSString *imageUrl = @"https://user-gold-cdn.xitu.io/2019/3/25/169b406dfc5fe46e";
    NSURL *url = [NSURL URLWithString:imageUrl];
    NSURLSession *session = [NSURLSession sharedSession];
    __weak typeof (self) weakSelf = self;
    NSURLSessionDataTask *task = [session dataTaskWithURL:url completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) {
        if (!error && data) {
            UIImage *image = [UIImage imageWithData:data];
            __strong typeof(weakSelf) strongSelf = weakSelf;
            if (strongSelf) {
                dispatch_async(dispatch_get_main_queue(), ^{
                    strongSelf.imageView.image = image;
                });
            }
        }
    }];
    [task resume];
}

2. 内存缓存

这样的实现方式非常简单,但有个致命的问题就是每次重新加载该图片时,都需要重新下载。因此,需要引入缓存来保存该图片,避免图片的多次下载。这里使用的是我们常用的NSCache类。 为了避免将所有相关逻辑都放在viewcontroller中,我们这里创建一个JImageDownloader来处理图片下载和缓存逻辑。

@interface JImageDownloader : NSObject
+ (instancetype)shareInstance;
- (void)fetchImageWithURL:(NSString *)url completion:(void(^)(UIImage * _Nullable image, NSError * _Nullable error))completionBlock;
@end

@interface JImageDownloader()
@property (nonatomic, strong) NSURLSession *session;
@property (nonatomic, strong) NSCache *imageCache;
@end
@implementation JImageDownloader
+ (instancetype)shareInstance {
    static JImageDownloader *instance;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        instance = [[JImageDownloader alloc] init];
        [instance setup];
    });
    return instance;
}
- (void)setup {
    self.session = [NSURLSession sharedSession];
    self.imageCache = [[NSCache alloc] init];
}
- (void)fetchImageWithURL:(NSString *)url completion:(void (^)(UIImage * _Nullable, NSError * _Nullable))completionBlock {
    if (!url || url.length == 0) {
        return;
    }
    //从缓存中获取
    UIImage *cacheImage = [self.imageCache objectForKey:url];
    if (cacheImage) {
        completionBlock(cacheImage, nil);
        [MBProgressHUD showGlobalHUDWithTitle:@"image from memory cache"];
        return;
    }
    __weak typeof (self) weakSelf = self;
    NSURLSessionDataTask *dataTask = [self.session dataTaskWithURL:[NSURL URLWithString:url] completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) {
        UIImage *image = nil;
        if (!error && data) {
            image = [UIImage imageWithData:data];
            __strong typeof (weakSelf) strongSelf = weakSelf;
            if (strongSelf && image) { //将图片放置在缓存中
                [strongSelf.imageCache setObject:image forKey:url];
            }
        }
        dispatch_async(dispatch_get_main_queue(), ^{
            if (error) {
                [MBProgressHUD showGlobalHUDWithTitle:error.description];
            } else {
                [MBProgressHUD showGlobalHUDWithTitle:@"image from network"];
            }
            completionBlock(image, error);
        });
    }];
    [dataTask resume];
}
@end

那么我们就可以在viewcontroller中直接调用该方法即可:

- (void)downloadImage {
    NSString *imageUrl = @"https://user-gold-cdn.xitu.io/2019/3/25/169b406dfc5fe46e";
    __weak typeof(self) weakSelf = self;
    [[JImageDownloader shareInstance] fetchImageWithURL:imageUrl completion:^(UIImage * _Nullable image, NSError * _Nullable error) {
        __strong typeof (weakSelf) strongSelf = weakSelf;
        if (strongSelf && image) {
            strongSelf.imageView.image = image;
        }
    }];
}

3. 磁盘缓存

上面我们引入来内存缓存来避免多次下载同一张图片,但内存缓存只能局限于App存活期。当App退出时,对应的图片缓存就会被销毁。这样我们下一次进入到App,请求图片时,还是要从网络中下载。为此,我们再引入磁盘缓存来保证App下一次启动时,可以从磁盘中获取,而不用从网络中获取。考虑到如果在原来的JImageDownloader中去增加磁盘缓存的话,那么将增大它的复杂性。因此,新建一个JImageCacheManager来专门负责缓存处理。

JImageCacheManager.h:目前只考虑简单的存取功能

@interface JImageCacheManager : NSObject
+ (instancetype)shareManager;
- (UIImage *_Nullable)queryImageCacheForKey:(NSString *)key;
- (void)storeImage:(UIImage *_Nullable)image forKey:(NSString *)key;
@end

实现磁盘缓存的话,我们就需要和NSFileManager打交道,那么涉及到的问题就远比内存缓存要更多些。

a. 磁盘缓存应该放在哪里?

NSArray<NSString *> *paths = NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES);
self.diskCachePath = [paths[0] stringByAppendingPathComponent:@"com.jimage.cache"];

b. 缓存的key是否可以使用url-string?

当然不能,因为url-string中格式大致为https://xxx/xx/xxx.png,如果使用这种方式会导致文件无法存取(亲测)。所以我们需要对url-string进行MD5加密处理,这里参考的SDWebImage的实现方式。

- (nullable NSString *)cachedFileNameForKey:(nullable NSString *)key {
    const char *str = key.UTF8String;
    if (str == NULL) {
        str = "";
    }
    unsigned char r[16];
    CC_MD5(str, (CC_LONG)strlen(str), r);
    NSURL *keyURL = [NSURL URLWithString:key];
    NSString *ext = keyURL ? keyURL.pathExtension : key.pathExtension;
    NSString *filename = [NSString stringWithFormat:@"%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%@",
                          r[0], r[1], r[2], r[3], r[4], r[5], r[6], r[7], r[8], r[9], r[10],
                          r[11], r[12], r[13], r[14], r[15], ext.length == 0 ? @"" : [NSString stringWithFormat:@".%@", ext]];
    return filename;
}

c. 如何对图片进行存取?

图片获取的方式比较容易,直接使用imageWithData:方法即可将NSData转化为image,主要是如何将image转化为NSData?系统提供了UIImagePNGRepresentationUIImageJPEGRepresentation两个方法来分别针对png、jpeg格式进行不同的处理。那么这里就需要我们在转换前,对image的格式进行判断。我们知道png格式是带alpha通道的,而jpeg没有。因此,我们可以根据是否含有alpha通道来判断.

- (BOOL)containsAlphaWithCGImage:(CGImageRef)imageRef {
    if (!imageRef) {
        return NO;
    }
    CGImageAlphaInfo alphaInfo = CGImageGetAlphaInfo(imageRef);
    BOOL hasAlpha = !(alphaInfo == kCGImageAlphaNone || alphaInfo == kCGImageAlphaNoneSkipFirst || alphaInfo == kCGImageAlphaNoneSkipLast);
    return hasAlpha;
}

if ([self containsAlphaWithCGImage:image.CGImage]) {
    data = UIImagePNGRepresentation(image);
} else {
    data = UIImageJPEGRepresentation(image, 1.0);
}

解决了以上问题之后,我们就可以增加磁盘缓存功能了。具体如下:

#import "JImageCacheManager.h"
#import <CommonCrypto/CommonDigest.h>

@interface JImageCacheManager ()
@property (nonatomic, strong) NSCache *imageMemoryCache;
@property (nonatomic, copy) NSString *diskCachePath;
@property (nonatomic, strong) NSFileManager *fileManager;
@end
@implementation JImageCacheManager
+ (instancetype)shareManager {
    static JImageCacheManager *instance;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        instance = [[JImageCacheManager alloc] init];
        [instance setup];
    });
    return instance;
}
- (void)setup {
    self.imageMemoryCache = [[NSCache alloc] init];
    self.fileManager = [NSFileManager new];
    NSArray<NSString *> *paths = NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES);
    self.diskCachePath = [paths[0] stringByAppendingPathComponent:@"com.jimage.cache"];
}
- (UIImage *)queryImageCacheForKey:(NSString *)key {
    if (!key || key.length == 0) {
        return nil;
    }
    UIImage *memoryCache = [self.imageMemoryCache objectForKey:key];
    if (memoryCache) { //从内存缓存中获取
        NSLog(@"image from memory cache");
        return memoryCache;
    }
    NSString *filepath = [self.diskCachePath stringByAppendingPathComponent:[self cachedFileNameForKey:key]];
    NSData *data = [NSData dataWithContentsOfFile:filepath];
    if (data) {
        UIImage *diskCache = [UIImage imageWithData:data];
        NSLog(@"image from disk cache");
        if (diskCache) { //从磁盘缓存中获取
            [self.imageMemoryCache setObject:diskCache forKey:key];
        }
        return diskCache;
    }
    return nil;
}

- (void)storeImage:(UIImage *)image forKey:(NSString *)key {
    if (!image || !key || key.length == 0) {
        return;
    }
    [self.imageMemoryCache setObject:image forKey:key]; //存储到内存中
    NSData *data = nil;
    if ([self containsAlphaWithCGImage:image.CGImage]) {
        data = UIImagePNGRepresentation(image);
    } else {
        data = UIImageJPEGRepresentation(image, 1.0);
    }
    if (!data) {
        return;
    }
    if (![self.fileManager fileExistsAtPath:self.diskCachePath]) {
        [self.fileManager createDirectoryAtPath:self.diskCachePath withIntermediateDirectories:YES attributes:nil error:nil];
    }
    NSString *cachePath = [self.diskCachePath stringByAppendingPathComponent:[self cachedFileNameForKey:key]];
    NSURL *fileURL = [NSURL fileURLWithPath:cachePath];
    [data writeToURL:fileURL atomically:YES]; //存储到磁盘中
}

#pragma mark - util methods
- (BOOL)containsAlphaWithCGImage:(CGImageRef)imageRef {
    if (!imageRef) {
        return NO;
    }
    CGImageAlphaInfo alphaInfo = CGImageGetAlphaInfo(imageRef);
    BOOL hasAlpha = !(alphaInfo == kCGImageAlphaNone || alphaInfo == kCGImageAlphaNoneSkipFirst || alphaInfo == kCGImageAlphaNoneSkipLast);
    return hasAlpha;
}

- (nullable NSString *)cachedFileNameForKey:(nullable NSString *)key {
    const char *str = key.UTF8String;
    if (str == NULL) {
        str = "";
    }
    unsigned char r[16];
    CC_MD5(str, (CC_LONG)strlen(str), r);
    NSURL *keyURL = [NSURL URLWithString:key];
    NSString *ext = keyURL ? keyURL.pathExtension : key.pathExtension;
    NSString *filename = [NSString stringWithFormat:@"%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%02x%@",
                          r[0], r[1], r[2], r[3], r[4], r[5], r[6], r[7], r[8], r[9], r[10],
                          r[11], r[12], r[13], r[14], r[15], ext.length == 0 ? @"" : [NSString stringWithFormat:@".%@", ext]];
    return filename;
}
@end

增加完JImageCacheManager之后,获取图片的方法就可以改成如下:

- (void)fetchImageWithURL:(NSString *)url completion:(void (^)(UIImage * _Nullable, NSError * _Nullable))completionBlock {
    if (!url || url.length == 0) {
        return;
    }
    NSURL *URL = [NSURL URLWithString:url];
    if (!URL) {
        return;
    }
    UIImage *cacheImage = [[JImageCacheManager shareManager] queryImageCacheForKey:url]; //获取缓存数据
    if (cacheImage) {
        completionBlock(cacheImage, nil);
        return;
    }
    __weak typeof (self) weakSelf = self;
    NSURLSessionDataTask *dataTask = [self.session dataTaskWithURL:URL completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) {
        UIImage *image = nil;
        if (!error && data) {
            image = [UIImage imageWithData:data];
            __strong typeof (weakSelf) strongSelf = weakSelf;
            if (strongSelf && image) {
                [[JImageCacheManager shareManager] storeImage:image forKey:url]; //写入缓存中
            }
        }
        dispatch_async(dispatch_get_main_queue(), ^{
            if (error) {
                NSLog(@"fetch image from net fail:%@", error.description);
            } else {
                NSLog(@"image from network");
            }
            completionBlock(image, error);
        });
    }];
    [dataTask resume];
}

我们可以看到缓存相关的操作就只有获取/存储两个操作了,这样能保证JImageDownloaderJImageCacheManager的单一责任。

4.异步处理

虽然上面增加了内存和磁盘缓存,但存在一个问题,我们知道对磁盘的读/写是非常耗时的,如果直接放在主线程中进行处理,那么势必会影响到性能,导致卡顿。为此,我们应该将对磁盘的读写操作放在子线程中进行处理。

JImageCacheManager.h:为了实现异步处理,我们需要将接口改成block返回

typedef NS_ENUM(NSUInteger, JImageCacheType) {
    JImageCacheTypeNone,
    JImageCacheTypeMemory,
    JImageCacheTypeDisk
};
@interface JImageCacheManager : NSObject
+ (instancetype)shareManager;
- (void)queryImageCacheForKey:(NSString *)key completionBlock:(void(^)(UIImage *_Nullable image, JImageCacheType cacheType))completionBlock;
- (void)storeImage:(UIImage *_Nullable)image forKey:(NSString *)key;
@end

引入队列来实现异步处理操作

@interface JImageCacheManager ()
...
@property (nonatomic, strong) dispatch_queue_t ioQueue;
@end
- (void)setup {
    ...
    self.ioQueue = dispatch_queue_create("com.jimage.cache", DISPATCH_QUEUE_SERIAL);
}

将读取/写入缓存封装为block,加入到队列中异步处理:

- (void)queryImageCacheForKey:(NSString *)key completionBlock:(void(^)(UIImage * _Nullable, JImageCacheType))completionBlock{
    if (!key || key.length == 0) {
        completionBlock(nil, JImageCacheTypeNone);
        return;
    }
    UIImage *memoryCache = [self.imageMemoryCache objectForKey:key];
    if (memoryCache) {
        NSLog(@"image from memory cache");
        completionBlock(memoryCache, JImageCacheTypeMemory);
        return;
    }
    void(^queryDiskBlock)(void) = ^ {
        NSString *filepath = [self.diskCachePath stringByAppendingPathComponent:[self cachedFileNameForKey:key]];
        NSData *data = [NSData dataWithContentsOfFile:filepath];
        UIImage *diskCache = nil;
        JImageCacheType cacheType = JImageCacheTypeNone;
        if (data) {
            diskCache = [UIImage imageWithData:data];
            if (diskCache) {
                cacheType = JImageCacheTypeDisk;
                [self.imageMemoryCache setObject:diskCache forKey:key];
                NSLog(@"image from disk cache");
            }
        }
        dispatch_async(dispatch_get_main_queue(), ^{
            completionBlock(diskCache, cacheType);
        });
    };
    dispatch_async(self.ioQueue, queryDiskBlock);//加入到队列中异步处理
}

- (void)storeImage:(UIImage *)image forKey:(NSString *)key {
    if (!image || !key || key.length == 0) {
        return;
    }
    [self.imageMemoryCache setObject:image forKey:key];
    void(^storeDiskBlock)(void) = ^ {
        NSData *data = nil;
        if ([self containsAlphaWithCGImage:image.CGImage]) {
            data = UIImagePNGRepresentation(image);
        } else {
            data = UIImageJPEGRepresentation(image, 1.0);
        }
        if (!data) {
            return;
        }
        if (![self.fileManager fileExistsAtPath:self.diskCachePath]) {
            [self.fileManager createDirectoryAtPath:self.diskCachePath withIntermediateDirectories:YES attributes:nil error:nil];
        }
        NSString *cachePath = [self.diskCachePath stringByAppendingPathComponent:[self cachedFileNameForKey:key]];
        NSURL *fileURL = [NSURL fileURLWithPath:cachePath];
        [data writeToURL:fileURL atomically:YES];
    };
    dispatch_async(self.ioQueue, storeDiskBlock);
}

那么对应的获取图片的方法修改如下:

- (void)fetchImageWithURL:(NSString *)url completion:(void (^)(UIImage * _Nullable, NSError * _Nullable))completionBlock {
    if (!url || url.length == 0) {
        return;
    }
    NSURL *URL = [NSURL URLWithString:url];
    if (!URL) {
        return;
    }
    [[JImageCacheManager shareManager] queryImageCacheForKey:url completionBlock:^(UIImage * _Nullable cacheImage, JImageCacheType cacheType) {
        if (cacheImage) {
            completionBlock(cacheImage, nil);
            return;
        }
        NSURLSessionDataTask *dataTask = [self.session dataTaskWithURL:URL completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) {
            UIImage *image = nil;
            if (!error && data) {
                image = [UIImage imageWithData:data];
                if (image) {
                    [[JImageCacheManager shareManager] storeImage:image forKey:url];
                }
            }
            if (error) {
                NSLog(@"fetch image from net fail:%@", error.description ? : @"");
            } else {
                NSLog(@"image from network");
            }
            dispatch_async(dispatch_get_main_queue(), ^{
                completionBlock(image, error);
            });
        }];
        [dataTask resume];
    }];
}

三、小结

本小节主要描述了实现图片加载框架的一个简易流程,包括引入内存/磁盘缓存。看似这一过程比较简单,但是需要考虑的细节还是很多。比如磁盘缓存中url->path的转化,以及如何使用队列来实现磁盘读写的异步执行。

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们