从零开始打造一个iOS图片加载框架（一）
1、前言
目前比较流行的图片加载框架主要包括：SDWebImage、YYWebImage和PINRemoteImage等。这里也有篇文章，很好地介绍了三个框架的优缺点：YYWebImage,SDWebImage和PINRemoteImage比较。git
关于打造一个iOS图片加载框架的缘由
- 锻炼本身的架构能力
- 虽然读过上面优秀框架的相关源码，但读的过程当中老是容易忽略不少实现细节，以及读完以后很难获取到真正本身所须要的内容
- 加深本身对iOS图片加载相关方面的理解
2、图片的加载
1. 图片的简单加载
咱们先从最简单的角度去看待加载一个网络图片，无非是经历：下载图片->显示图片这么个过程。github
- (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来处理图片下载和缓存逻辑。segmentfault
@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来专门负责缓存处理。bash
JImageCacheManager.h:目前只考虑简单的存取功能网络
@interface JImageCacheManager : NSObject
+ (instancetype)shareManager;
- (UIImage *_Nullable)queryImageCacheForKey:(NSString *)key;
- (void)storeImage:(UIImage *_Nullable)image forKey:(NSString *)key;
@end
复制代码
实现磁盘缓存的话，咱们就须要和NSFileManager打交道，那么涉及到的问题就远比内存缓存要更多些。session
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？系统提供了UIImagePNGRepresentation和UIImageJPEGRepresentation两个方法来分别针对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];
}
复制代码
咱们能够看到缓存相关的操做就只有获取/存储两个操做了，这样能保证JImageDownloader和JImageCacheManager的单一责任。
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];
}];
}
复制代码
3、小结
本小节主要描述了实现图片加载框架的一个简易流程，包括引入内存/磁盘缓存。看似这一过程比较简单，可是须要考虑的细节仍是不少。好比磁盘缓存中url->path的转化，以及如何使用队列来实现磁盘读写的异步执行。
相关文章
- 1. 从零开始打造一个iOS图片加载框架（二）
- 2. 从零开始打造一个iOS图片加载框架（四）
- 3. 从零开始打造一个iOS图片加载框架（三）
- 4. 打造独一无二的图片加载框架
- 5. 从零开始实现一个RPC框架（零）
- 6. 从零开始实现一个RPC框架（一）
- 7. 从零开始编写一个MVVM框架（一）（译）
- 8. 从零开始打造一个12306验证码识别系统
- 9. Vue+Electron从零开始打造一个本地播放器
- 10. Electron+vue从零开始打造一个本地播放器
- 更多相关文章...
- • 第一个MyBatis程序 - MyBatis教程
- • 第一个Hibernate程序 - Hibernate教程
- • RxJava操作符（一）Creating Observables
- • Kotlin学习（一）基本语法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. vs2019运行opencv图片显示代码时，窗口乱码
- 2. app自动化 - 元素定位不到？别慌，看完你就能解决
- 3. 在Win8下用cisco ××× Client连接时报Reason 422错误的解决方法
- 4. eclipse快速补全代码
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代码的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒发生变种 新文件名将带有“.UIWIX”后缀
- 8. 【原创】Python 源文件编码解读
- 9. iOS9企业部署分发问题深入了解与解决
- 10. 安装pytorch报错CondaHTTPError：******
欢迎关注本站公众号,获取更多信息
