iOS 大圖顯示解決辦法

前段時間出去面試,遇到了好幾個面試官都在問同一個問題:如何展示一個畫素遠遠大於螢幕解析度的圖片?
說實話,初次被問到這個問題我感到有點懵,以至於最後也沒能回答到點子上,導致面試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

參考:https://www.jianshu.com/p/ee0628629f92