Private form image on uiimageview

Question

Can we set the shape on the image using UIImageView .

Any idea!

thanks

Answer 1

Yes, you can set the form in UIImage. First, add the mask image (in what form you want) to your project. and write this code.

 [yourImageView setImage:[self createMaskImage:yourImage withMask:MaskImage]]; - (UIImage*) createMaskImage:(UIImage *)image withMask:(UIImage *)maskImage { CGImageRef maskRef = maskImage.CGImage; CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef), CGImageGetHeight(maskRef), CGImageGetBitsPerComponent(maskRef), CGImageGetBitsPerPixel(maskRef), CGImageGetBytesPerRow(maskRef), CGImageGetDataProvider(maskRef), NULL, false); CGImageRef masked = CGImageCreateWithMask([image CGImage], mask); return [UIImage imageWithCGImage:masked]; } 

Answer 2

Swift 3 version - with border

Like others, I would use the image mask property.

Apple's information on the mask property:

The alpha channel of the layers determines how many of the contents of the layers and the background are viewed. Fully or partially opaque pixels allow basic content to be displayed, but fully transparent pixels block this content. The default value of this property is nil nil.

When setting up the mask, be sure to set the size and position of the mask layer to make sure that it is correctly aligned with the layer that it is masking.

The last sentence is important!

1. Create your mask

I used Sketch to create a black image with a transparent background (PNG).

Add it to the Assets.xcassets folder. My image is called profileMask .

2. Add UIImageView to the storyboard

Create a power outlet to view the image. I called my profileImageView .

3. code viewDidLoad

 override func viewDidLoad() { super.viewDidLoad() let maskImageView = UIImageView() maskImageView.contentMode = .scaleAspectFit maskImageView.image = #imageLiteral(resourceName: "profileMask") maskImageView.frame = profileImageView.bounds profileImageView.mask = maskImageView } 

Note:

• I added contentMode because without it my mask was stretched to fit the borders of the UIImageView (width). You can solve this by simply making your UIImageView the same size as your mask image, or vice versa.

Here's what it looks like at startup:

What about the border?

Guys, it hurt. I tried to create the Bezier Path, but to be honest, my skills in creating the exact shape for the mask were impossible for me. The Bezier path would probably look very good if you had the skills to do this, but I do not. :(

So, I had an idea: "What if I just use the mask image as a border?" It worked! The advantage of this is that you can use any shape of the mask in the future, and it will create a border for it without having to figure out the bezier path.

Here is how I did it:

• In Assets.xcassets, select your mask and change the Render As property to "Template Image". This allows you to change the color of the mask image by changing the UIImageView Tint Color property.
• Then in the code, I set the profileImageView to a mask and change the hue color to what I want the border to be.
• Then I created another image for Jason's profile picture and applied a mask to it. I made the same size as profileImageView minus 2 points (to show the main mask image, which will be the border).
• The final step is to add the masked image as a subtitle to profileImageView .

Here is the code in viewDidLoad now:

 override func viewDidLoad() { super.viewDidLoad() // Add border first (mask image) profileImageView.contentMode = .scaleAspectFit profileImageView.tintColor = .lightGray // Border Color profileImageView.image = #imageLiteral(resourceName: "profileMask") // Profile Image let profileImage = UIImageView() profileImage.image = #imageLiteral(resourceName: "Profile") profileImage.contentMode = .scaleAspectFill // Make a little bit smaller to show "border" image behind it profileImage.frame = profileImageView.bounds.insetBy(dx: 2, dy: 2) // Mask Image let maskImageView = UIImageView() maskImageView.image = #imageLiteral(resourceName: "profileMask") maskImageView.contentMode = .scaleAspectFit maskImageView.frame = profileImage.bounds // Apply mask to profile iamge profileImage.mask = maskImageView // Add profile image as a subview on top of the "border" image profileImageView.addSubview(profileImage) } 

So now it looks when we run it:

Closing

Which can be really cool if we create a custom UIImageView with the mask and border width property. Then you can simply assign these properties and the user class will take care of the rest. Let me know if you want to see something like this, and I will create it and publish it here. Maybe also do a YouTube video tutorial for my channel.

Answer 3

You can use the mask property for ImageView CALayer:

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

This applies only to ImageView, so if you want to directly modify UIImage, you should use the Core Graphics mask:

 - (UIImage*) maskImage:(UIImage *)image withMask:(UIImage *)maskImage { CGImageRef maskRef = maskImage.CGImage; CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef), CGImageGetHeight(maskRef), CGImageGetBitsPerComponent(maskRef), CGImageGetBitsPerPixel(maskRef), CGImageGetBytesPerRow(maskRef), CGImageGetDataProvider(maskRef), NULL, false); CGImageRef maskedImageRef = CGImageCreateWithMask([image CGImage], mask); UIImage *maskedImage = [UIImage imageWithCGImage:maskedImageRef]; CGImageRelease(mask); CGImageRelease(maskedImageRef); // returns new image with mask applied return maskedImage; } 

Answer 4

Sorry for the hard code. Try using UIBezierPath to set whatever shape you want.

 CAShapeLayer* maskLayer = [CAShapeLayer layer]; UIBezierPath* path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(75, 200)]; [path addCurveToPoint:CGPointMake(0, 100) controlPoint1:CGPointMake(0, 150) controlPoint2:CGPointMake(0, 150)]; [path addArcWithCenter:CGPointMake(75, 100) radius:75 startAngle:M_PI endAngle:0 clockwise:YES]; [path addCurveToPoint:CGPointMake(75, 200) controlPoint1:CGPointMake(150, 150) controlPoint2:CGPointMake(150, 150)]; [path closePath]; maskLayer.backgroundColor = [[UIColor clearColor] CGColor]; maskLayer.path = [path CGPath]; yourImageView.layer.mask = maskLayer; 

Answer 5

Easy using

 UIImageView *image=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"balloon_selected_left.png"] ]; self.maskImage.layer.mask=image.layer;