2

I have used this solution to apply corner radius to UIImage in Quartz. It works fine like I predicted.

However the corners area outside of the image are not transparent but somewhat colored in white:

UIImage with rounded corners made in Quartz

The image above shows top left corner of processed image that is opaque and not transparent.

I want cropped-out edges to be totally transparent. How can I achieve this?

EDIT: If I want to do this with UIImageView I would already done this. So please keep in mind that I want to do this with Quartz on UIImage object not UIImageView.

SOLUTION: The problem is actually not in the drawing code but rather in writing that image to the file system. I've saved image as JPEG an not as PNG. That's why corners were not transparent cos JPEG does not have alpha filter.

Community
  • 1
  • 1
Borut Tomazin
  • 8,041
  • 11
  • 78
  • 91
  • Edit your question. Paste in the code that creates the graphics context and draws into it. – rob mayoff Jan 03 '13 at 08:58
  • Make sure that the `UIImageView` you are rendering it in has a clear background. – msgambel Jan 03 '13 at 08:58
  • @robmayoff: The link to the code already exists in code. Here it is again: http://stackoverflow.com/questions/14071278/uiimage-with-smooth-rounded-corners-in-quartz/14071921#14071921 – Borut Tomazin Jan 03 '13 at 09:09
  • @msgambel: Clear background on UIImageView does not help if UIImage has no transparent corners... – Borut Tomazin Jan 03 '13 at 09:13

5 Answers5

1

I usually use a custom category implemented on UIImage to crop the images with round corners. This was taken from this answer. 

void addRoundedRectToPath(CGContextRef context, CGRect rect, float ovalWidth, float ovalHeight, BOOL top, BOOL bottom)
{
    float fw, fh;
    if (ovalWidth == 0 || ovalHeight == 0) {
        CGContextAddRect(context, rect);
        return;
    }
    CGContextSaveGState(context);
    CGContextTranslateCTM (context, CGRectGetMinX(rect), CGRectGetMinY(rect));
    CGContextScaleCTM (context, ovalWidth, ovalHeight);
    fw = CGRectGetWidth (rect) / ovalWidth;
    fh = CGRectGetHeight (rect) / ovalHeight;
    CGContextMoveToPoint(context, fw, fh/2);
    CGContextAddArcToPoint(context, fw, fh, fw/2, fh, 0);

    NSLog(@"bottom? %d", bottom);

    if (top) {
        CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 3);
    } else {
        CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 0);
    }

    if (bottom) {
        CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 3);
    } else {
        CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 0);
    }

    CGContextAddArcToPoint(context, fw, 0, fw, fh/2, 0);
    CGContextClosePath(context);
    CGContextRestoreGState(context);
}

- (UIImage *)roundCornersOfImage:(UIImage *)source roundTop:(BOOL)top roundBottom:(BOOL)bottom {
    int w = source.size.width;
    int h = source.size.height;

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = CGBitmapContextCreate(NULL, w, h, 8, 4 * w, colorSpace, kCGImageAlphaPremultipliedFirst);

    CGContextBeginPath(context);
    CGRect rect = CGRectMake(0, 0, w, h);
    addRoundedRectToPath(context, rect, 4, 4, top, bottom);
    CGContextClosePath(context);
    CGContextClip(context);

    CGContextDrawImage(context, CGRectMake(0, 0, w, h), source.CGImage);

    CGImageRef imageMasked = CGBitmapContextCreateImage(context);
    CGContextRelease(context);
    CGColorSpaceRelease(colorSpace);

    return [UIImage imageWithCGImage:imageMasked];    
}
Community
  • 1
  • 1
Pulkit Goyal
  • 5,604
  • 1
  • 32
  • 50
0

For transparent use this:

 const float colorMasking[6] = {1.0, 1.0, 0.0, 0.0, 1.0, 1.0};
 yourImage = [UIImage imageWithCGImage: CGImageCreateWithMaskingColors(yourImage.CGImage, colorMasking)];

EDIT : Add this both line in method of UIImage category 

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextClearRect(context, rect);
Paresh Navadiya
  • 38,095
  • 11
  • 81
  • 132
  • This is not working for me. Could you please refer to this code: http://stackoverflow.com/questions/14071278/uiimage-with-smooth-rounded-corners-in-quartz/14071921#14071921 – Borut Tomazin Jan 03 '13 at 09:10
0

add these bellow lines in your drawRect method ..

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextClearRect(context, rect);
    ///your another code here
}

after create Context it required to clear another context from that Rect... so after that line add this line CGContextClearRect(context, rect);.

Paras Joshi
  • 20,427
  • 11
  • 57
  • 70
  • If you've looked closely at the code this is already done with this line of code: UIGraphicsBeginImageContextWithOptions(self.size, NO, 0.0); Second parameter is set to NO which means that opaque is set to NO. – Borut Tomazin Jan 03 '13 at 09:18
  • hey see this answer for that http://stackoverflow.com/questions/2125543/setting-a-cgcontext-transparent-background – Paras Joshi Jan 03 '13 at 09:19
  • ok ok otherwise may be it is possible that background not clear bcoz some other contenxt are there so.. :) good solution – Paras Joshi Jan 03 '13 at 09:43
  • yes dude i see the solution after that i post above comment and also +1 for that.. :) – Paras Joshi Jan 03 '13 at 09:46
0

The problem is actually not in the drawing code but rather in writing that image to the file system. I've saved image as JPEG an not as PNG. That's why corners were not transparent cos JPEG does not have alpha filter.

Just replaced this line of code:

[UIImageJPEGRepresentation(image, 0.75) writeToFile:path atomically:YES];

... with this one:

[UIImagePNGRepresentation(image) writeToFile:path atomically:YES];
Borut Tomazin
  • 8,041
  • 11
  • 78
  • 91
-1

Try this code

Image.layer.cornerRadius = 10.0;
Image.layer.borderColor = [UIColor blackColor].CGColor;
Image.layer.borderWidth = 0.5;
Image.clipsToBounds = YES;
Image.backgroundColor = [UIColor clearColor];

Hope it helps you

EDIT :-

I think you just need to add this :-

Image.clipsToBounds = YES;
P.J
  • 6,547
  • 9
  • 44
  • 74