[iOS/Objective-C] 이미지 자르기 (Image crop), CGContextSetBlendMode usage

Xcode/iOS/Objective-c에서 이미지 자르기.

Image Crop in Xcode/iOS/Objective-C

1. ImageCropViewController

  1) 이미지를 자를 수 있는 뷰 컨트롤러를 만든다.

  1) Making View Controller for Image Crop like below.

  2) 이미지 자르기 할 영역만 음영처리가 빠져있고, 이미지는 원형으로 자름.

  2) We should shade except cropping region. and We're gonna crop in circle.

  3) Core Graphics for circular masking.

    - 이미지를 사각형으로 자를 것이라면 전혀 문제가 없겠지만, 대부분의 이미지 크롭 프로젝트에서는 원형으로 자르기 때문에 자를 영역을 보여주는 뷰에서는 코어 그래픽스가 필요하다.

    - There's no matter If you want rectangle cropped image, but in almost project, You might to crop image circular. so you have to use core graphics.

    // crop할 때 동그란 마스크 씌우기.
    // Circle masking
 
    // 1. 이미지뷰와 같은 크기의 컨텍스트를 만든다.
    // 1. Make context which is same size with image view.
    CGRect maskRect = CGRectMake(0, 0, self.ivCropCircle.frame.size.width, self.ivCropCircle.frame.size.height);
    UIGraphicsBeginImageContext(maskRect.size);
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 2. 배경과 같은 색상을 칠한다.
    // 2. Fill color which is same with shading color. 
    CGContextSetFillColorWithColor(ctx, [[UIColor colorWithWhite:0 alpha:0.5] CGColor]);
    CGContextFillRect(ctx, maskRect);
    
    // 3. 나중에 그려지는 것들은 기존에서 삭제되도록 블렌드 모드 설정.
    // 3. set blend mode clear for clearing shape from now on.
    CGContextSetBlendMode(ctx, kCGBlendModeClear);
    
    // 4. circle을 그려서 빼준다.
    // 4. draw circle for subtract circle (because of kCGBlendModeClear)
    CGContextSetFillColorWithColor(ctx, [UIColor clearColor].CGColor);
    CGContextFillEllipseInRect(ctx, maskRect);
 
    // 5. 이미지로 가져온다.
    // 5. Extract to UIImage
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    // 6. set crop image view
    self.ivCropCircle.image = image;
 

  4) 화면에 나타난 이미지는 Aspect Fit이기 때문에 위에서 나온 영역으로 바로 이미지를 자르면 원하는 결과가 나오지 않는다. 따라서 영역 보정을 해줘야 한다.

  4) Because Original Image displayed in Aspect Fit mode, You have to calculate scale that how much displayed image smaller than original image

    // 화면에 나타내어지는 이미지 rect
    // displayed image rect
    CGRect imageDisplayedRect = [self CGSizeAspectFitWithRatio:self.ivImage.image.size boundSize:self.ivImage.frame.size];
 
    // 실제 이미지 사이즈 대비 화면 scale
    // scale between real image size and displayed image size
    CGFloat scaleWidth = self.ivImage.image.size.width / imageDisplayedRect.size.width;
    CGFloat scaleHeight = self.ivImage.image.size.height / imageDisplayedRect.size.height;
        
    // crop영역 설정
    // setting crop rect
    CGRect cropRect = CGRectMake((self.ivCropCircle.frame.origin.x - imageDisplayedRect.origin.x) * scaleWidth, (self.ivCropCircle.frame.origin.y - imageDisplayedRect.origin.y) * scaleHeight, self.ivCropCircle.frame.size.width * scaleWidth, self.ivCropCircle.frame.size.height * scaleHeight);
        
    // 이미지에서 crop 영역만큼을 가져온다.
    // getting cropped image from real image
    CGImageRef imageRef = CGImageCreateWithImageInRect([self.ivImage.image CGImage], cropRect);
 
    UIImage *croppedImg = [UIImage imageWithCGImage:imageRef];
    CGImageRelease(imageRef);
 

  5) 사각형으로 크롭된 이미지 처리

  5) process rectangle cropped image

    A) 이미지뷰에서 마스킹

    A) Image Mask on ImageView 

// profile image mask
CALayer *mask = [CALayer layer];
mask.contents = (id)[[UIImage imageNamed:@"circle_image.png"] CGImage];
mask.frame = CGRectMake(0, 0, self.ivMyProfile.frame.size.width, self.ivMyProfile.frame.size.height);
self.imageView.layer.mask = mask;
self.imageView.layer.masksToBounds = YES;

    B) 사각형 이미지를 동그랗게 자르기

    B) Crop Rectangle Image again

       -  "3) Core Graphics for circular masking." 을 참고하여 가장자리를 자른다.

       - Subtract unnecessary Region using "3) Core Graphics for circular masking."