Shulou(Shulou.com)06/02 Report--

This article is about how iOS achieves cropping and displaying circular images. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

This article is mainly used in the environment of iOS 10. If you want to use the system photo library, camera and other functions, you need authorization. The authorization methods are as follows:

Right-click "Info.plist file-- > Open As-- > Source Code" in the project directory, and open and copy the following privacy permission settings you use in the application (describe your own modifications):

NSVideoSubscriberAccountUsageDescription NSBluetoothPeripheralUsageDescription Bluetooth permission NSSpeechRecognitionUsageDescription speech recognition right NSSiriUsageDescription Siri right NSRemindersUsageDescription NSPhotoLibraryUsageDescription album right kTCCServiceMediaLibrary NSMotionUsageDescription Motion right NSMicrophoneUsageDescription microphone right NSAppleMusicUsageDescription Music right NSLocationWhenInUseUsageDescription Geographic location right NSLocationUsageDescription Geographic location right NSLocationAlwaysUsageDescription Geographic location right NSHomeKitUsageDescription NSHealthUpdateUsageDescription Health right NSHealthShareUsageDescription Health permissions NSContactsUsageDescription address Book permissions NSCameraUsageDescription camera permissions NSCalendarsUsageDescription Calendar permissions

Next, we formally enter the coding of the functions to be implemented in this article.

1. Create a button and a p_w_picpathView using Xcode's storyboard

The effect after creation is shown in figure 1. Among them, the size of p_w_picpathView affects the size of the final display, please set it according to the actual situation.

two。 Create a category of UIImage (Category)

Create a new file and select "Objective-C File", as shown in figure 2 below:

In the pop-up dialog shown in figure 3, "File" writes the name of the category (in this case, DY), "File Type" selects Category, and "Class" selects UIImage. Then click the "Next" button to save the new file.

3. Write code in a category

In the UIImage+DY.h file

# import @ interface UIImage (DY) + (instancetype) circleOldImage: (UIImage *) originalImage borderWidth: (CGFloat) borderWidth borderColor: (UIColor *) borderColor;@end

In the UIImage+DY.m file

# import "UIImage+DY.h" @ implementation UIImage (DY) + (instancetype) circleOldImage: (UIImage *) originalImage borderWidth: (CGFloat) borderWidth borderColor: (UIColor *) borderColor {/ / 1. Load the original image UIImage * oldImage = originalImage; / / 2. Open the context CGFloat p_w_picpathW = oldImage.size.width + 2 * borderWidth; CGFloat p_w_picpathH = oldImage.size.height + 2 * borderWidth; CGSize p_w_picpathSize = CGSizeMake (p_w_picpathW, p_w_picpathH); UIGraphicsBeginImageContextWithOptions (p_w_picpathSize, NO, 0.0); / / 3. Get the current context CGContextRef ctx = UIGraphicsGetCurrentContext (); / / 4. Draw a border (big circle) [borderColor set]; CGFloat bigRadius = p_w_picpathW * 0.5; / / large circle radius CGFloat centerX = bigRadius; / / center CGFloat centerY = bigRadius; CGContextAddArc (ctx, centerX, centerY, bigRadius, 0, M_PI * 2,0); CGContextFillPath (ctx); / / draw a circle / / 5. Small circle CGFloat smallRadius = bigRadius-borderWidth; CGContextAddArc (ctx, centerX, centerY, smallRadius, 0, M_PI * 2,0); / / CGContextClip (ctx); / / 6. Drawing [oldImage drawInRect:CGRectMake (borderWidth, borderWidth, oldImage.size.width, oldImage.size.height)]; / / 7. Take the figure UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext (); / / 8. End context UIGraphicsEndImageContext (); return newImage;} @ end

+ (instancetype) circleOldImage: (UIImage *) originalImage borderWidth: (CGFloat) borderWidth borderColor: (UIColor *) borderColor method description:

1. This is a class method that ends up returning a class of UIImage

two。 The originalImage parameter in the method refers to the photos selected from the photo library or after taking photos (which may have been cropped by the system).

3. The borderWidth parameter in the method refers to the width of the border of the final displayed circular image, which can be set according to your own needs.

4. The borderColor parameter in the method refers to the color of the border of the final displayed circular image, which can be set according to your needs.

4. Realize cropping into a circular image and displaying it

ViewController.h file

# import # import "UIImage+DY.h" / / load category @ interface ViewController: UIViewController / / be sure to add these two Delegate@property (strong, nonatomic) UIImagePickerController * paired wicked picpathPicker controllers-(IBAction) btnPressed: (id) sender;@property (strong, nonatomic) IBOutlet UIImageView * ablumImageView;@end

ViewController.m file

# import "ViewController.h" @ interface ViewController () @ end@implementation ViewController- (void) viewDidLoad {[super viewDidLoad]; / / Do any additional setup after loading the view, typically from a nib.}-(void) didReceiveMemoryWarning {[super didReceiveMemoryWarning] / / Dispose of any resources that can be recreated.}-(IBAction) btnPressed: (id) sender {if ([UIImagePickerController isSourceTypeAvailable: UIImagePickerControllerSourceTypePhotoLibrary]) {/ / first determine whether the photo library is supported. The parameters in this method should be consistent with the value of _ p_w_picpathPickerController.sourceType / / if _ p_w_picpathPickerController = [UIImagePickerController alloc] init] is supported. _ p_w_picpathPickerController.view.backgroundColor = [UIColor orangeColor]; _ p_w_picpathPickerController.sourceType = UIImagePickerControllerSourceTypePhotoLibrary; _ p_w_picpathPickerController.delegate = self; _ p_w_picpathPickerController.allowsEditing = YES / / this parameter is NO by default, and it is recommended to set it to YES, otherwise the method of cropping into a circular image will get an oval image, which is quite different from what you expected [self presentViewController:_p_w_picpathPickerController animated:YES completion:nil] }}-(void) p_w_picpathPickerController: (UIImagePickerController *) picker didFinishPickingMediaWithInfo: (NSDictionary *) info {_ ablumImageView.p_w_picpath = [UIImage circleOldImage: [info objectForKey:UIImagePickerControllerEditedImage] borderWidth:30.0f borderColor: [UIColor orangeColor]]; / / the key value of Info in this method "UIImagePickerControllerEditedImage" indicates the cropped image. If this key value is used, the value of _ p_w_picpathPickerController.allowsEditing needs to be set to YES. / / if the value of _ p_w_picpathPickerController.allowsEditing is set to NO, the value of this Key should be set to the following values of Key in UIImagePickerControllerOriginalImage / * info: NSString * const UIImagePickerControllerMediaType; specify the media type selected by the user (expand at the end of the article) NSString * const UIImagePickerControllerOriginalImage; original image NSString * const UIImagePickerControllerEditedImage; modified image NSString * const UIImagePickerControllerCropRect; cropping size NSString * const UIImagePickerControllerMediaURL; media URLNSString * const UIImagePickerControllerReferenceURL; original URLNSString * const UIImagePickerControllerMediaMetadata This value is valid only when the data source is a camera * / [self dismissViewControllerAnimated:YES completion:nil];}-(void) p_w_picpathPickerControllerDidCancel: (UIImagePickerController *) picker {[self dismissViewControllerAnimated:YES completion:nil];} @ end Thank you for reading! This is the end of the article on "how to achieve clipping and displaying circular images in iOS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.