SDWebImage源碼解讀 之 UIImage+GIF

第二篇

前言

本篇是和GIF相關的一個UIImage的分類。主要提供了三個方法：

• + (UIImage *)sd_animatedGIFNamed:(NSString *)name ----- 根據名稱獲取圖片
• + (UIImage *)sd_animatedGIFWithData:(NSData *)data ----- 根據NSData獲取圖片
• - (UIImage *)sd_animatedImageByScalingAndCroppingToSize:(CGSize)size ----- 修改圖片到指定的尺寸

UIImage的size，scale屬性

咱們先無論圖片的更高級的知識，咱們簡單的對size和scale這兩個屬性作一下介紹。

注意：若是要獲取一個圖片的尺寸，不是直接使用image.size，而是使用image.size*image.scale。固然，這是僞代碼。緣由就是咱們在獲取size的時候。使用的是Point座標，而圖片的尺寸是以像素爲參照的。系統爲咱們處理了這兩種座標系的轉換工做。

咱們用一個例子來演示上邊的內容：

UIImage *image = [UIImage imageNamed:@"photo_delete"];
NSLog(@"-----尺寸:(%f %f)", image.size.width, image.size.height);

打印結果爲：

-----尺寸:(18.000000 18.000000)

能夠看出來。使用size這個屬性是不對的。該圖片的實際尺寸爲：

那咱們修改下代碼：

UIImage *image = [UIImage imageNamed:@"photo_delete"];
NSLog(@"-----尺寸:(%f %f)", image.size.width * image.scale, image.size.height * image.scale);

打印結果以下：

-----尺寸:(36.000000 36.000000)

修改圖片到指定的尺寸

- (UIImage *)sd_animatedImageByScalingAndCroppingToSize:(CGSize)size {
    if (CGSizeEqualToSize(self.size, size) || CGSizeEqualToSize(size, CGSizeZero)) {
        return self;
    }

    CGSize scaledSize = size;
    CGPoint thumbnailPoint = CGPointZero;

    CGFloat widthFactor = size.width / self.size.width;
    CGFloat heightFactor = size.height / self.size.height;
    CGFloat scaleFactor = (widthFactor > heightFactor) ? widthFactor : heightFactor;
    scaledSize.width = self.size.width * scaleFactor;
    scaledSize.height = self.size.height * scaleFactor;

    if (widthFactor > heightFactor) {
        thumbnailPoint.y = (size.height - scaledSize.height) * 0.5;
    }
    else if (widthFactor < heightFactor) {
        thumbnailPoint.x = (size.width - scaledSize.width) * 0.5;
    }

    NSMutableArray *scaledImages = [NSMutableArray array];

    for (UIImage *image in self.images) {
        UIGraphicsBeginImageContextWithOptions(size, NO, 0.0);
        
        [image drawInRect:CGRectMake(thumbnailPoint.x, thumbnailPoint.y, scaledSize.width, scaledSize.height)];
        UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

        [scaledImages addObject:newImage];

        UIGraphicsEndImageContext();
    }
 
    return [UIImage animatedImageWithImages:scaledImages duration:self.duration];
}

上邊的方法可以實現把圖片的尺寸修剪爲size，剪裁的前提是根據圖片原來的比例。具體的實現，在這裏就不舉例說明了。和數學原理有點關係。

+ (float)sd_frameDurationAtIndex:(NSUInteger)index source:(CGImageSourceRef)source

一個Image Sources抽象出來了圖片數據，經過raw memory buffer減輕開發人員對數據的處理。Image Sources包含不止一個圖像，縮略圖，各個圖像的特徵和圖片文件。經過CGImageSource實現。能夠這麼說：
CGImageSourceRef就是對圖像數據的一層封裝。

+ (float)sd_frameDurationAtIndex:(NSUInteger)index source:(CGImageSourceRef)source {
    float frameDuration = 0.1f;
    CFDictionaryRef cfFrameProperties = CGImageSourceCopyPropertiesAtIndex(source, index, nil);
    NSDictionary *frameProperties = (__bridge NSDictionary *)cfFrameProperties;
    NSDictionary *gifProperties = frameProperties[(NSString *)kCGImagePropertyGIFDictionary];

    NSNumber *delayTimeUnclampedProp = gifProperties[(NSString *)kCGImagePropertyGIFUnclampedDelayTime];
    if (delayTimeUnclampedProp) {
        frameDuration = [delayTimeUnclampedProp floatValue];
    }
    else {

        NSNumber *delayTimeProp = gifProperties[(NSString *)kCGImagePropertyGIFDelayTime];
        if (delayTimeProp) {
            frameDuration = [delayTimeProp floatValue];
        }
    }

    // Many annoying ads specify a 0 duration to make an image flash as quickly as possible.
    // We follow Firefox's behavior and use a duration of 100 ms for any frames that specify
    // a duration of <= 10 ms. See <rdar://problem/7689300> and <http://webkit.org/b/36082>
    // for more information.

    if (frameDuration < 0.011f) {
        frameDuration = 0.100f;
    }

    CFRelease(cfFrameProperties);
    return frameDuration;
}

+ (UIImage )sd_animatedGIFWithData:(NSData )data

當咱們由NSData => UIImage 的時候，咱們應該考慮更多一點。若是NSData中不止一張圖片，應該怎麼辦？

1. 獲取NSData中的圖片數量

   CGImageSourceRef source = CGImageSourceCreateWithData((__bridge CFDataRef)data, NULL);
    size_t count = CGImageSourceGetCount(source);

2. 若是圖片數量小於或者等於1，直接轉換

   if (count <= 1) {
            animatedImage = [[UIImage alloc] initWithData:data];
        }

3. 數量大於1的狀況

   • 取出每個圖片
   • 計算總的duration
   • 生成UIImage

代碼以下：

+ (UIImage *)sd_animatedGIFWithData:(NSData *)data {
    if (!data) {
        return nil;
    }

    CGImageSourceRef source = CGImageSourceCreateWithData((__bridge CFDataRef)data, NULL);
    size_t count = CGImageSourceGetCount(source);

    UIImage *animatedImage;

    if (count <= 1) {
        animatedImage = [[UIImage alloc] initWithData:data];
    }
    else {
        NSMutableArray *images = [NSMutableArray array];

        NSTimeInterval duration = 0.0f;

        for (size_t i = 0; i < count; i++) {
            CGImageRef image = CGImageSourceCreateImageAtIndex(source, i, NULL);
            if (!image) {
                continue;
            }

            duration += [self sd_frameDurationAtIndex:i source:source];

            [images addObject:[UIImage imageWithCGImage:image scale:[UIScreen mainScreen].scale orientation:UIImageOrientationUp]];

            CGImageRelease(image);
        }

        if (!duration) {
            duration = (1.0f / 10.0f) * count;
        }

        animatedImage = [UIImage animatedImageWithImages:images duration:duration];
    }

    CFRelease(source);

    return animatedImage;

}

+ (UIImage )sd_animatedGIFNamed:(NSString )name

+ (UIImage *)sd_animatedGIFNamed:(NSString *)name {
    CGFloat scale = [UIScreen mainScreen].scale;

    if (scale > 1.0f) {
        NSString *retinaPath = [[NSBundle mainBundle] pathForResource:[name stringByAppendingString:@"@2x"] ofType:@"gif"];

        NSData *data = [NSData dataWithContentsOfFile:retinaPath];

        if (data) {
            return [UIImage sd_animatedGIFWithData:data];
        }

        NSString *path = [[NSBundle mainBundle] pathForResource:name ofType:@"gif"];

        data = [NSData dataWithContentsOfFile:path];

        if (data) {
            return [UIImage sd_animatedGIFWithData:data];
        }

        return [UIImage imageNamed:name];
    }
    else {
        NSString *path = [[NSBundle mainBundle] pathForResource:name ofType:@"gif"];

        NSData *data = [NSData dataWithContentsOfFile:path];

        if (data) {
            return [UIImage sd_animatedGIFWithData:data];
        }

        return [UIImage imageNamed:name];
    }
}

補充

在這裏補充一點實現漸進式圖片加載的步驟。

當圖片從網絡中獲取的時候，可能因爲過大，數據緩慢，這時候就須要漸進式加載圖片來顯示。主要經過CFData對象來實現：

1. 建立一個CFData去添加image data
2. 建立一個漸進式圖片資源，經過 CGImageSourceCreateIncremental
3. 獲取圖片數據到CFData中
4. 調用CGImageSourceUpdateData函數，傳遞CFData和一個bool值，去描述這個數據是否包含所有圖片數據或者只是部分數據。不管什麼狀況，這個data包含已經積累的所有圖片文件
5. 若是已經有足夠的圖片數據，能夠經過函數繪製CGImageSourceCreateImageAtIndex部分圖片，而後記得要Release掉它
6. 檢查是否已經有所有的圖片數據經過使用CGImageSourceGetStatusAtIndex函數。若是圖片是完整的，函數返回值爲kCGImageStatusComplete。不然繼續3，4步驟，直到得到所有數據
7. Release掉漸進式增加的image source

總結

寫到這裏，我忽然意識到，gif也算是一種無損的格式，本分類也只是給予UIImage支持GIF的能力，所以由這種思想，我聯想到別的地方。當咱們須要某種能力支持的時候，咱們應該去觀察底層，也就是數據層的規律。就好比圖像數據，本質上仍是一些二進制的數據，越往上，越被包裝的簡單易用，歸根到底，寫代碼的根本就是處理數據。

SDWebImage源碼解讀 之 NSData+ImageContentType 簡書 博客園