美文网首页
YYImage检测图片格式与加载GIF图片的原理

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

作者: 紫水依 | 来源:发表于2019-04-22 19:12 被阅读0次

    图片格式: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或其他波动影响而暂停或卡顿

    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
    

    相关文章

      网友评论

          本文标题:YYImage检测图片格式与加载GIF图片的原理

          本文链接:https://www.haomeiwen.com/subject/jezdgqtx.html