iOS 下載圖片 壓縮 顯示到CALayer上

在開發中會有這樣的場景,從網上下載圖片,壓縮圖片到屏幕尺寸,最后顯示出來,顯示的位置或許是CollectionView上,在整個過程中,還會有滑動,Cell 重用等情況。如果不處理好,會有些許卡頓。

// 線程同步方式去下載圖片, 會阻塞線程
NSURL *url = [NSURL URLWithString:@"http://img0.imgtn.bdimg.com/it/u=86408331,3792352527&fm=23&gp=0.jpg"];
NSData *data = [NSData dataWithContentsOfURL:url];

注意的是,這個方法是阻塞線程的,如果使用主線程,湊巧網絡不給力,那么界面會卡頓,通常會用異步下載。

dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT,0), ^{

  NSURL *url = [NSURL URLWithString:@"http://img0.imgtn.bdimg.com/it/u=86408331,3792352527&fm=23&gp=0.jpg"];
  NSData *data = [NSData dataWithContentsOfURL:url];
  // 下載好后繼續 裁剪圖片
   。。。
});

圖片獲取到之后,然后開始裁剪,這里的imageMaxSize 指的是最長邊,這個方法的好處在于解碼峰值把握得非常好,性能可能不是最優,CGContext 相關的縮圖方案可以查查google或者baidu,很完善了。

// 直接壓縮,沒有峰值 , 需要自己釋放 CGImageRef
CGImageRef thumbnailImageWithData(NSData *jpgData, NSInteger imageMaxSize) {
    
    CGImageSourceRef imageSource = CGImageSourceCreateWithData((CFDataRef)jpgData, NULL);
    
    CFDictionaryRef options =  (__bridge CFDictionaryRef) @{
                                                            (id) kCGImageSourceCreateThumbnailWithTransform : @YES,
                                                            (id) kCGImageSourceCreateThumbnailFromImageAlways : @YES,
                                                            (id) kCGImageSourceThumbnailMaxPixelSize : @(imageMaxSize)
                                                            };
    
    CGImageRef thumbnail = CGImageSourceCreateThumbnailAtIndex(imageSource, 0, options);
    CFRelease(imageSource);
    
    return thumbnail;
}

我嘗試用 3500 x 6225像素的圖片壓縮成 359x640,效果還是不錯的,另一種方案也能壓縮,他們2種都是大約0.42s(iPhone7),不過第2種可調參數更多。

- (CGImageRef)resizeImageAtPathFast:(NSString *)imagePath
{
    UIImage *img = [UIImage imageWithContentsOfFile:imagePath];
    
    CGImageRef imageRef = img.CGImage;
    
    CGRect newRect = CGRectIntegral(CGRectMake(0, 0, 359, 640));
    CGContextRef bitmap = CGBitmapContextCreate(NULL,
                                                newRect.size.width,
                                                newRect.size.height,
                                                CGImageGetBitsPerComponent(imageRef),
                                                0,
                                                CGImageGetColorSpace(imageRef),
                                                CGImageGetBitmapInfo(imageRef));
    // Rotate and/or flip the image if required by its orientation
    CGContextConcatCTM(bitmap, CGAffineTransformIdentity);
    
    // Set the quality level to use when rescaling
    CGContextSetInterpolationQuality(bitmap, kCGInterpolationDefault);
    
    CGContextSetShouldAntialias(bitmap, true);
    CGContextSetAllowsAntialiasing(bitmap, true);
    //CGContextSetFlatness(bitmap, 0);
    
    // Draw into the context; this scales the image
    //CGContextDrawTiledImage(bitmap, transposedRect, imageRef);
    CGContextDrawImage(bitmap, newRect, imageRef);
    
    // Get the resized image from the context and a UIImage
    CGImageRef newImageRef = CGBitmapContextCreateImage(bitmap);
    
    return newImageRef;
}

kCGInterpolationDefault 這個地方有幾個選擇,如果選擇Low 可以快很多,質量會差很多,清楚得看到鋸齒。注意,這個方法其實沒有對exif里的方向作處理。

接下來是顯示,一般情況下使用了UIImageView這個控件來顯示圖片,如果說這個圖片不需要有事件的響應的話可以直接用 CALayer,

            CALayer *x = [[CALayer alloc] init];
            x.frame = CGRectMake(x, y, w, h);
            
            /** Layer `contentsGravity' values.
            
            CA_EXTERN NSString * const kCAGravityCenter
            CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
            CA_EXTERN NSString * const kCAGravityTop
            CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
            CA_EXTERN NSString * const kCAGravityBottom
            CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
            CA_EXTERN NSString * const kCAGravityLeft
            CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
            CA_EXTERN NSString * const kCAGravityRight
            CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
            CA_EXTERN NSString * const kCAGravityTopLeft
            CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
            CA_EXTERN NSString * const kCAGravityTopRight
            CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
            CA_EXTERN NSString * const kCAGravityBottomLeft
            CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
            CA_EXTERN NSString * const kCAGravityBottomRight
            CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
            CA_EXTERN NSString * const kCAGravityResize
            CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
            CA_EXTERN NSString * const kCAGravityResizeAspect
            CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
            CA_EXTERN NSString * const kCAGravityResizeAspectFill
            CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
            **/

            // 圖片的顯示模式,這里使用 等比全部顯示完
            x.contentsGravity = kCAGravityResizeAspect;            
            x.masksToBounds = YES;// 裁剪多余
            x.contents =(__bridge id _Nullable)(cgImg);//cgImg 最好已經解碼好了,速度最快
            [self.view.layer addSublayer:x];

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容