移动端图片类型的支持情况

mobile_image_arch.png

Android 的图片编码解码是由 Skia 图形库负责的，Skia 通过挂接第三方开源库实现了常见的图片格式的编解码支持。目前来说，Android 原生支持的格式只有 JPEG、PNG、GIF、BMP 和 WebP (Android 4.0 加入)，在上层能直接调用的编码方式也只有 JPEG、PNG、WebP 这三种。目前来说 Android 还不支持直接的动图编解码。

iOS 底层是用 ImageIO.framework 实现的图片编解码。目前 iOS 原生支持的格式有：JPEG、JPEG2000、PNG、GIF、BMP、ICO、TIFF、PICT，自 iOS 8.0 起，ImageIO 又加入了 APNG、SVG、RAW 格式的支持。在上层，开发者可以直接调用 ImageIO 对上面这些图片格式进行编码和解码。对于动图来说，开发者可以解码动画 GIF 和 APNG、可以编码动画 GIF。

UIImage缓存是怎么回事？

通过 imageNamed 创建 UIImage 时，系统实际上只是在 Bundle 内查找到文件名，然后把这个文件名放到 UIImage 里返回，并没有进行实际的文件读取和解码。当 UIImage 第一次显示到屏幕上时，其内部的解码方法才会被调用，同时解码结果会保存到一个全局缓存去。在图片解码后，App 第一次退到后台和收到内存警告时，该图片的缓存才会被清空，其他情况下缓存会一直存在。

我要是用imageWithData能不能避免缓存呢？

不能。通过数据创建 UIImage 时，UIImage 底层是调用 ImageIO 的 CGImageSourceCreateWithData() 方法。该方法有个参数叫 kCGImageSourceShouldCache，在 64 位的设备上，这个参数是默认开启的。这个图片也是同样在第一次显示到屏幕时才会被解码，随后解码数据被缓存到 CGImage 内部。与 imageNamed创建的图片不同，如果这个图片被释放掉，其内部的解码数据也会被立刻释放。

怎么能避免缓存呢？

1. 手动调用 CGImageSourceCreateWithData() 来创建图片，并把 kCGImageSourceShouldCache 和 kCGImageSourceShouldCacheImmediately 关掉。这么做会导致每次图片显示到屏幕时，解码方法都会被调用，造成很大的 CPU 占用。（发现并不能避免缓存，效果同imageWithData一样，图片被释放掉，内部解码数据才会被释放）
   代码是这样的：

- (UIImage *)createImageWithData:(NSData *)data {
    CGImageSourceRef source = CGImageSourceCreateWithData((__bridge CFTypeRef)(data), NULL);
    NSDictionary *dic = @{(id)kCGImageSourceShouldCache: @NO, (id)kCGImageSourceShouldCacheImmediately: @NO};
    CGImageRef image = CGImageSourceCreateImageAtIndex(source, 0, (__bridge CFDictionaryRef)(dic));
    UIImage *scaledImage = [UIImage imageWithCGImage:image];
    CFRelease(source);
    CGImageRelease(image);
    return scaledImage;
}

1440 * 2560的jpg图片占用内存为：

屏幕快照 2018-07-16 下午4.21.53.png

2. 把图片用 CGContextDrawImage()绘制到画布上，然后把画布的数据取出来当作图片。这也是常见的网络图片库的做法。

- (UIImage *)createDecodeCopy:(CGImageRef)imageRef {
    size_t width = CGImageGetWidth(imageRef);
    size_t height = CGImageGetHeight(imageRef);
    CGImageAlphaInfo alphaInfo = CGImageGetAlphaInfo(imageRef) & kCGBitmapAlphaInfoMask;
    BOOL hasAlpha = NO;
    if (alphaInfo == kCGImageAlphaPremultipliedLast ||
        alphaInfo == kCGImageAlphaPremultipliedFirst ||
        alphaInfo == kCGImageAlphaLast ||
        alphaInfo == kCGImageAlphaFirst) {
        hasAlpha = YES;
    }
    CGBitmapInfo bitmapInfo = kCGBitmapByteOrder32Host;
    bitmapInfo |= hasAlpha ? kCGImageAlphaPremultipliedFirst : kCGImageAlphaNoneSkipFirst;
    //If `data' is NULL, the data for context is allocated automatically and freed when the context is deallocated
    CGContextRef context = CGBitmapContextCreate(NULL, width, height, 8, 0, CGColorSpaceCreateDeviceRGB(), bitmapInfo);
    if (!context) return NULL;
    CGContextDrawImage(context, CGRectMake(0, 0, width, height), imageRef);
    CGImageRef newImageRef = CGBitmapContextCreateImage(context);
    UIImage *image = [UIImage imageWithCGImage:newImageRef];
    //内存释放
    CFRelease(context);
    CGImageRelease(newImageRef);
    return image;
}

3.用drawInRect绘制到画布

- (UIImage *)originalImage:(UIImage *)image scaleToSize:(CGSize)size {
    UIGraphicsBeginImageContext(size);
    [image drawInRect:CGRectMake(0, 0, size.width, size.height)];
    UIImage *scaledImage = UIGraphicsGetImageFromCurrentImageContext();
    //内存释放
    UIGraphicsEndImageContext();
    return scaledImage;
}

4.从网上搜到一种（RN的Image组件是用此方法进行解码）

- (UIImage *)createThumbnailImageWithData:(NSData *)data scaleToSize:(CGSize)size {
    CGImageSourceRef source = CGImageSourceCreateWithData((__bridge CFTypeRef)(data), NULL);
    CGFloat maxDimension = MAX(size.width, size.height);
    NSDictionary *dic = @{(id)kCGImageSourceCreateThumbnailFromImageAlways: @YES, (id)kCGImageSourceThumbnailMaxPixelSize: @(maxDimension)};
    CGImageRef image = CGImageSourceCreateThumbnailAtIndex(source, 0, (__bridge CFDictionaryRef)(dic));
    UIImage *scaledImage = [UIImage imageWithCGImage:image];
    CFRelease(source);
    CGImageRelease(image);
    return scaledImage;
}

方法2、3、4均选用一张1440 * 2560的jpg图片，从instruments查看内存占用情况

屏幕快照 2018-07-16 下午4.29.16.png

通过画布获取解码后的数据，并没有通过ImageIO进行解码，原始像素数据大小为1440 * 2560 * 4=14.06M，绘制到size为1440 * 2560的画布上，所占内存为1440 * 2560 * 4=14.06M，如果绘制到size为1024 * 1024的画布上，内存为1024 * 1024 * 4 = 4M，如图

屏幕快照 2018-07-16 下午4.33.55.png

关于内存占用的一些疑问

1、缓存没有体现，不知道从哪里可以看到
2、方法2、3会造成内存飙升，之后降下来。禁用方法2中的CFRelease()或方法3中的UIGraphicsEndImageContext()，上下文无法释放，内存泄漏，在CGImage中内存会一直存在，参考下图。猜测内存飙升是上下文所占内存（width * height * 4），当上下文释放后，内存才会降下来。

屏幕快照 2018-07-16 下午4.46.43.png

屏幕快照 2018-07-16 下午5.06.12.png

推荐使用方法4加载大图