YYImage检测图片格式与加载GIF图片的原理

图片格式:GIF、PNG、JPEG、BMP、TIFF、WebP等

一、YYImageDetectType检测图片格式

图片格式判断方法:首先以后缀名判断,再以前4-8个字节判断
每一个图片格式都有对应的十六进制数据,十六进制数据组成了一张图片,其中前4-8字节代表图片格式:
89 50 4E 47 0D 0A 1A 0A 00 00 ……
前面的4个字节(89 50 4E 47)的ASCII 对应的就是 ‘.’ ‘P’ ‘N’ ‘G’;
47 49 46 38 39 61 64 00 …….
前面的4个字节(47 49 46 38)的ASCII 对应的就是‘G’ ‘I’ ‘F’ ‘8’

YYImageCoder类中YYImageDetectType方法通过data数据检测图片格式

uint64_t length = CFDataGetLength(data); // uint64_t相当于8个字节,取出前8个字节长度的数据

if (length < 16) return YYImageTypeUnknown; // 最少需要4个字节(占16位)来判断图片格式,所以length<16时无法判断

const char *bytes = (char *)CFDataGetBytePtr(data); // 将data转换成char类型的数据

uint32_t magic4 = *((uint32_t *)bytes); // 通过强转为uint32_t(4个字节)类型,也就是4个字节的数据magic4

switch (magic4) {
        case YY_FOUR_CC(0x4D, 0x4D, 0x00, 0x2A): { // big endian TIFF
            return YYImageTypeTIFF;
        } break;
            
        case YY_FOUR_CC(0x49, 0x49, 0x2A, 0x00): { // little endian TIFF
            return YYImageTypeTIFF;
        } break;
            
        case YY_FOUR_CC(0x00, 0x00, 0x01, 0x00): { // ICO
            return YYImageTypeICO;
        } break;
            
        case YY_FOUR_CC(0x00, 0x00, 0x02, 0x00): { // CUR
            return YYImageTypeICO;
        } break;
            
        case YY_FOUR_CC('i', 'c', 'n', 's'): { // ICNS
            return YYImageTypeICNS;
        } break;
            
        case YY_FOUR_CC('G', 'I', 'F', '8'): { // GIF
            return YYImageTypeGIF;
        } break;
            
        case YY_FOUR_CC(0x89, 'P', 'N', 'G'): {  // PNG
            uint32_t tmp = *((uint32_t *)(bytes + 4));
            if (tmp == YY_FOUR_CC('\r', '\n', 0x1A, '\n')) {
                return YYImageTypePNG;
            }
        } break;
            
        case YY_FOUR_CC('R', 'I', 'F', 'F'): { // WebP
            uint32_t tmp = *((uint32_t *)(bytes + 8));
            if (tmp == YY_FOUR_CC('W', 'E', 'B', 'P')) {
                return YYImageTypeWebP;
            }
        } break;
        /*
        case YY_FOUR_CC('B', 'P', 'G', 0xFB): { // BPG
            return YYImageTypeBPG;
        } break;
        */
    }

#define YY_FOUR_CC(c1,c2,c3,c4) ((uint32_t)(((c4) << 24) | ((c3) << 16) | ((c2) << 8) | (c1)))
宏定义YY_FOUR_CC进行位运算将对应的十六进制拼接成uint32_t数据,以此来匹配数据magic4,以此判断图片类型

PNG图片,一般PNG格式的前4个字节都是(89 50 4E 47)对应 ‘.’ ‘P’ ‘N’ ‘G’,所以用YY_FOUR_CC(0x89, 'P', 'N', 'G')来判断,uint32_t tmp = *((uint32_t *)(bytes + 4));
匹配完数据magic4后,又将接着的4个字节数据强转为uint32_t类型,用YY_FOUR_CC('\r', '\n', 0x1A, '\n')再匹配具体的图片格式,完整的判断一张PNG格式的图片确实需要8个字节

WebP图片,uint32_t tmp = *((uint32_t *)(bytes + 8));
匹配完数据magic4后,还需要将接着的8个字节数据强转为uint32_t类型,用YY_FOUR_CC('W', 'E', 'B', 'P')再匹配具体的图片格式

二、YYImage加载GIF图片

动图由一帧帧的图片组成,对动图进行解码之后需要使用YYAnimatedImageView来进行播放

YYAnimatedImageView

1)继承于UIImageView,init方法里设置了
_runloopMode = NSRunLoopCommonModes;
避免在播放过程中受到tracking或其他波动影响而暂?;蚩ǘ?/p>

2)重写setImage:方法,使用定时器CADisplayLink绘制动画
①首先停止动画

- (void)stopAnimating {
    [super stopAnimating];
    [_requestQueue cancelAllOperations]; // 取消所有任务
    _link.paused = YES; //  暂停定时器
    self.currentIsPlayingAnimation = NO; // 重置播放动画状态为NO
}

②如果已经创建了定时器_link,需要重置动画参数
if (_link) [self resetAnimated];

dispatch_once(&_onceToken, ^{
        _lock = dispatch_semaphore_create(1);
        _buffer = [NSMutableDictionary new]; // 存储图片UImage对象
        _requestQueue = [[NSOperationQueue alloc] init];
        _requestQueue.maxConcurrentOperationCount = 1;
        _link = [CADisplayLink displayLinkWithTarget:[YYWeakProxy proxyWithTarget:self] selector:@selector(step:)]; // 创建播放动画的定时器
        if (_runloopMode) {
            [_link addToRunLoop:[NSRunLoop mainRunLoop] forMode:_runloopMode];
        }
        _link.paused = YES; // 默认定时器是暂停状态
        
        [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(didReceiveMemoryWarning:) name:UIApplicationDidReceiveMemoryWarningNotification object:nil]; // 监听内存警告
        [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(didEnterBackground:) name:UIApplicationDidEnterBackgroundNotification object:nil];
    }); // 监听APP进入后台

然后取消所有任务,释放_buffer中的images图片,重置用到的参数

[self imageChanged];,展示图片开始启动定时器播放动画
④动画播放的定时器方法step:中,_buffer中存储关键帧图片,拿到_buffer中的图片进行播放,播放需要获取每一张图片播放的时长duration,duration存放在二进制data中,将所有图片的duration相加获取播放总时长_time,
if (_time < delay) return;表示当前动画未执行完,会继续执行

if (!bufferIsFull && _requestQueue.operationCount == 0) { // if some work not finished, wait for next opportunity
        _YYAnimatedImageViewFetchOperation *operation = [_YYAnimatedImageViewFetchOperation new];
        operation.view = self;
        operation.nextIndex = nextIndex;
        operation.curImage = image;
        [_requestQueue addOperation:operation];
    }

上面的判断表示在显示了一张图片后,立马缓存好下一张为接下来的播放做准备,保证播放更流畅
if (_time > delay) _time = delay;为了不跳过当前动画,动画播放完成后暂停动画stopAnimating,LOCK是从缓存中取关键帧

LOCK(
         bufferedImage = buffer[@(nextIndex)];
         if (bufferedImage) {
             if ((int)_incrBufferCount < _totalFrameCount) {
                 [buffer removeObjectForKey:@(nextIndex)];
             }
             [self willChangeValueForKey:@"currentAnimatedImageIndex"];
             _curIndex = nextIndex;
             [self didChangeValueForKey:@"currentAnimatedImageIndex"];
             _curFrame = bufferedImage == (id)[NSNull null] ? nil : bufferedImage;
             if (_curImageHasContentsRect) {
                 _curContentsRect = [image animatedImageContentsRectAtIndex:_curIndex];
                 [self setContentsRect:_curContentsRect forImage:_curFrame];
             }
             nextIndex = (_curIndex + 1) % _totalFrameCount;
             _bufferMiss = NO;
             if (buffer.count == _totalFrameCount) {
                 bufferIsFull = YES;
             }
         } else {
             _bufferMiss = YES;
         }
    )//LOCK
?著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,029评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,238评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事?!?“怎么了?”我有些...
    开封第一讲书人阅读 159,576评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,214评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,324评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,392评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,416评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,196评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,631评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,919评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,090评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,767评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,410评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,090评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,328评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,952评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,979评论 2 351

推荐阅读更多精彩内容