前段时间出去面试,遇到了好几个面试官都在问同一个问题:如何展示一个像素远远大于屏幕分辨率的图片?
说实话,初次被问到这个问题我感到有点懵,以至于最后也没能回答到点子上,导致面试gameOver~~
后来,我回去查了资料才发现这是个图片显示需求常见的问题(内存暴增直至死机),因为在以往项目里面没出过问题(没重视过这个问题),所以在这方面有些欠缺.后来我研究了一番,终于有点成果,但是忙于其他事情,以至于忘记为这方面进行记录,知道我的同事推荐我看的一篇文章,我才记得我之前的折腾,现在我在这里记录一下.
他推荐的文章 https://www.jianshu.com/p/de7b6aede888
内存暴增的原因
由于图片尺寸巨大,图片在解压后,加载进入内存时转换成bitmap会有4倍的增长,从而导致内存暴增.
如:苹果官方demo中的图片尺寸为7033 × 10110 解压缩生成的bitmap可高达7033101104/1024/1024 = 271M
解决办法
时间换空间,既然不能一下子把图片加载进内存,那我们分片加载就可以了,把一张大图分成N片,利用多线程对图片进行渲染,这样峰值内存就不会太高了
方案对比
1.UIKit-setImage;
2.苹果官方demo提供的分片比例裁剪方式;
3.CATiledLayer;
其中,
1是直接使用UIImageView.Image赋值;
2是参考苹果给出的demo,利用CGImageCreateWithImageInRect截取原图对应位置的内容,再通过CGContextDrawImage渲染到指定位置;
3是利用CATiledLayer层级的API,自动进行绘制;
以下是对比的数据
可以看到,利用CATiledLayer绘制的内存峰值最低,绘制后内存增量最小,也充分利用了CPU的能力.
需要说明的是,由于setImage无法界定何时渲染结束,UIKit-setImage这个方案的耗时测试是两次测试相减的结果,具体是:首次进入页面(viewDidApper - viewDidLoad) - 第二次进入(viewDidApper - viewDidLoad) 这样得出的数据虽然没有把解码图片操作耗费的时间计入记录,但也不会影响最后的结果.另外,第一次进入的耗时比第二次大,并且内存一直居高不下,这说明bitmap还在内存中.
分析
1.苹果官方demo提供的分片比例裁剪方式,这个代码的实现我是参考了苹果官方demo编写的,主要内容都是官方demo里面的,不同的是我加入了一个子线程去进行绘制,让绘制的任务在一个子线程进行,这样导致耗时比CATiledLayer的要更多的原因,相信用多个线程进行绘制的效果应该跟CATiledLayer差不多;
2.CATiledLayer是苹果提供的API,实现细节都在内部处理,所以显得会流畅许多,观察发现它利用多个线程进行绘制,这也是区别于官方demo提供的分片比例裁剪方式的实现效果;
分析结果:CATiledLayer比我自己编写的分片渲染的时间耗费更少的原因是CATiledLayer使用了多个线程进行绘制.
后期疑惑
CATiledLayer有几个关键的参数: levelsOfDetail和levelsOfDetailBias和tileSize
levelsOfDetail表示每缩放一倍每片的缩放是原来的多少,如:levelsOfDetail=1表示缩小一倍,每片的大小缩小为原来的1/2
levelsOfDetailBias表示需要放大多少次才能达到原始图片大小
tileSize表示每片的最大面积
耗时长短和分片数量有何关系?于是,我又记录了一些数据
可以看到,并没有一个固定关系,我猜想应该跟多线程相关,这样的验证是无法得到一个正确的结论,以至于后面我在代码里面设置默认的分片数量为100,当然也可以通过制定数量为某种大小的图片进行定制.
结论
使用CATiledLayer展示一个像素远远大于屏幕分辨率的图片可以避免内存暴增
附加功能
既然本地方式的大图显示的问题可以避免了,那如果是网络加载的大图呢?UITableView来回刷新的大图呢?
关于网络加载的功能,我引用了SDImage框架的图片下载管理器,缺点是需要依赖这个框架,优点是不用额外编写,直接可以使用,特别说明的是,由于不需要内存缓存,下载器我重新定义了ID,因此不会跟SDImage所使用的下载器产生冲突,这个部分内容可以参考demo里面的一下文件
SDWebImageManager+largeImage.m
SDWebImageDownloader+largeImage.m
SDImageCache+largeImage.m
可以直接使用demo里面YPLargeImageView这个类来对大图的处理,它依赖于SDImage框架和以上几个类进行图片下载.
//
// YPLargeImageView.h
// LargeImageLoadTest
//
// Created by ZYP on 2018/6/6.
// Copyright © 2018年 ZYP. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface YPLargeImageView : UIView
- (void)yp_setImageWithUrl:(NSString *)url ;
- (void)yp_setImageName:(NSString *)imageName ;
// tiledCount 表示需要放大多少遍才能达到原始图片尺寸 default 100
- (void)yp_setImageWithUrl:(NSString *)url tiledCount:(int)tiledCount ;
- (void)yp_setImageName:(NSString *)imageName tiledCount:(int)tiledCount ;
@end
//
// YPLargeImageView.m
// LargeImageLoadTest
//
// Created by ZYP on 2018/6/6.
// Copyright © 2018年 ZYP. All rights reserved.
//
#import "YPLargeImageView.h"
#import "UIImageView+WebCache.h"
#import "SDWebImageManager+largeImage.h"
#import "Timinger.h"
@interface YPLargeImageView(){
long long tiledCount;
UIImage *originImage;
CGRect imageRect;
CGFloat imageScale_w;
CGFloat imageScale_h;
}
@end
@implementation YPLargeImageView
- (void)yp_setImageWithUrl:(NSString *)url tiledCount:(int)tiledCount {
tiledCount = tiledCount;
[self yp_setImageWithUrl:url];
}
- (void)yp_setImageName:(NSString *)imageName tiledCount:(int)tiledCount {
tiledCount = tiledCount;
[self yp_setImageName:imageName];
}
- (void)yp_setImageWithUrl:(NSString *)url {
[self yp_setLargeImageWithUrl:url completed:^(UIImage * _Nullable image,
NSData * _Nullable data,
NSError * _Nullable error,
SDImageCacheType cacheType,
BOOL finished,
NSURL * _Nullable imageURL) {
if (finished && !error && image) {
[self yp_setImage:image];
}
else {
NSLog(@"YPLargeImageView error:%@",error);
}
}];
}
- (void)yp_setImageName:(NSString *)imageName {
[self yp_setImage:[UIImage imageNamed:imageName]];
}
- (void)yp_setImage:(UIImage *)image {
if (tiledCount == 0) tiledCount = 81;
originImage = image;
[self setBackgroundColor:[UIColor whiteColor]];
imageRect = CGRectMake(0.0f,
0.0f,
CGImageGetWidth(originImage.CGImage),
CGImageGetHeight(originImage.CGImage));
imageScale_w = self.frame.size.width/imageRect.size.width;
imageScale_h = self.frame.size.height/imageRect.size.height;
CATiledLayer *tiledLayer = (CATiledLayer *)[self layer];
int scale = (int)MAX(1/imageScale_w, 1/imageScale_h);
int lev = ceil(scale);
tiledLayer.levelsOfDetail = 1;
tiledLayer.levelsOfDetailBias = lev;
if(tiledCount > 0){
NSInteger tileSizeScale = sqrt(tiledCount)/2;
CGSize tileSize = self.bounds.size;
tileSize.width /=tileSizeScale;
tileSize.height /=tileSizeScale;
tiledLayer.tileSize = tileSize;
}
}
- (void)yp_setLargeImageWithUrl:(NSString *)url completed:(SDInternalCompletionBlock)completedBlock {
[[SDWebImageManager sharedManagerForLargeImage] loadImageWithURL:[NSURL URLWithString:url]
options:SDWebImageCacheMemoryOnly
progress:nil
completed:completedBlock];
}
+ (Class)layerClass {
return [CATiledLayer class];
}
- (void)drawRect:(CGRect)rect {
@autoreleasepool{
CGRect imageCutRect = CGRectMake(rect.origin.x / imageScale_w,
rect.origin.y / imageScale_h,
rect.size.width / imageScale_w,
rect.size.height / imageScale_h);
CGImageRef imageRef = CGImageCreateWithImageInRect(originImage.CGImage, imageCutRect);
UIImage *tileImage = [UIImage imageWithCGImage:imageRef];
CGContextRef context = UIGraphicsGetCurrentContext();
UIGraphicsPushContext(context);
[tileImage drawInRect:rect];
CGImageRelease(imageRef);
UIGraphicsPopContext();
[Timinger.sharedTiminger addCount];
}
}
@end
注意:YPLargeImageView是继承UIView的,所以在使用storyboard/xib时候要注意了.
PS:demo中的图片是苹果官方demo提供的.
PS: Timinger这个类是为了计算时间测试使用的
最后,献上demo地址:https://github.com/zhuyuping/LargeImageLoadTest
