如何为缩略图快速加载图像的低分辨率版本？或者简单地说,如何最好地创建缩略图？

Question

许多应用程序(如Tweetbot)在其表视图控制器中显示缩略图,以获得更高分辨率的图像.

例如,此图像显示的缩略图在点按时显示较大的图像:

然而,我很困惑这些图像是如何加载的.我的想法是加载原始图像,然后缩小到缩略图大小并显示.但是,我发现这很难相信,因为图像需要花费相当多的时间来以全分辨率加载/下载,所以对每个图像执行此操作只是为了缩小它看起来需要相当长的时间.但这些似乎很快就会加载.

我也很怀疑,因为当你点击图像然后在显示全分辨率图像之前需要一秒钟加载,这让我觉得如果他们下载全分辨率之前它会暂时缓存并立即加载当用户点击它.

所以我很好奇如何实现与此应用程序中类似的缩略图系统.给定图像的链接,例如上图中显示的图像,如何快速将图像放在URL上并将其显示为缩略图？

Answer 1

通常有2个图像由服务器而不是客户端创建,服务器提供2个URL用于检索图像,一个用于缩略图,一个用于完整res图像((这是90%的应用程序中发生的情况)) ,所以你UIImageView((或谁负责))应该加载缩略图,然后加载全分辨率图像,并缓存后者,这样当你点击它时,它会很快打开.现在有很多情况:

• 服务器非常快速,并且您连接到快速wifi,因此应用程序可以快速加载图像
• 图像尺寸不是很大,因此无论如何加载完整的图像并不需要时间,最终会在手机上显示.

如果你想实现你提到的,这个库可以帮助你.

Answer 2

如果您必须在设备上进行缩小(即服务器不提供较小的版本),您可能希望首先避免在内存中加载和膨胀完整大小的图像.(现在大多数其他答案都在暗示这一点.)

相反,您可以使用该CGImageSourceCreateThumbnailAtIndex方法直接从原始(压缩)数据创建缩略图,而无需先将其展开(通过将其包装在CGImageSource中).您可以在Apple的"图像I/O编程指南"下的" 从图像源创建缩略图图像 "下查看完整示例.

对于小型源图像,这可能没有大的影响,但对于大型图像,它可以帮助很多,特别是对于内存消耗.

Answer 3

这些很可能是通过调整原始全分辨率图像大小而创建的单独图像（缩略图），然后与全分辨率图像分开保存 - 这就是缩略图加载速度非常快的原因。我编写了一个执行类似操作的应用程序（尽管它在本地保存缩略图和完整分辨率图像）。这是代码 -

-(void)setThumbnailDataFromImage:(UIImage *)image//image is full res image that you want a thumbnail of
{

    CGSize origImageSize = [image size];
    CGRect newRect = CGRectMake(0, 0, 50, 50);
    float ratio = MAX(newRect.size.width/origImageSize.width, newRect.size.height/origImageSize.height);
    UIGraphicsBeginImageContextWithOptions(newRect.size, NO, 0.0);
    //the following two lines round the edges of the thumbnail
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:newRect cornerRadius:5.0];

    [path addClip];
    CGRect projectRect;
    projectRect.size.width = ratio * origImageSize.width;
    projectRect.size.height = ratio * origImageSize.height;
    projectRect.origin.x =(newRect.size.width - projectRect.size.width)/2.0;
    projectRect.origin.y =(newRect.size.height-projectRect.size.height)/2.0;
    [image drawInRect:projectRect];
    UIImage *smallImage = UIGraphicsGetImageFromCurrentImageContext();
    if (thumbnailDataArray==nil) {
        thumbnailDataArray = [[NSMutableArray alloc]init];
    }
     NSData *data = UIImagePNGRepresentation(smallImage);
    if (thumbnail == nil) {

        [self setThumbnail:smallImage];
        [self setThumbnailData:data];
    }
    NSData *otherObject = UIImagePNGRepresentation(smallImage);

    [thumbnailDataArray addObject:otherObject];

    UIGraphicsEndImageContext();
}

然后加载缩略图

-(UIImage *)thumbnail
{
    if (!thumbnailData) {
        return nil;
    }
    if (!thumbnail) {
        thumbnail = [UIImage imageWithData:thumbnailData];
    }
    return thumbnail;
}

然后当点击缩略图时，将加载全分辨率图像