詳解iOS 裁剪圓形圖像并顯示(類似于微信頭像)
本文主要講解如何從照片庫(kù)選擇一張照片后將其裁剪成圓形頭像并顯示,類似于微信頭像那種模式。
本文的方法也適用于當(dāng)時(shí)拍照獲取的圖像,方法類似,所以不再贅述。
本文主要是在iOS 10環(huán)境下使用,此時(shí)如果要使用使用系統(tǒng)照片庫(kù)、照相機(jī)等功能需要授權(quán),授權(quán)方法如下:
右鍵點(diǎn)擊工程目錄中的“Info.plist文件——>Open As ——>Source Code”,打開(kāi)復(fù)制以下你在應(yīng)用中使用的隱私權(quán)限設(shè)置(描述自己修改):
<key>NSVideoSubscriberAccountUsageDescription</key> <string></string> <key>NSBluetoothPeripheralUsageDescription</key> <string>藍(lán)牙權(quán)限</string> <key>NSSpeechRecognitionUsageDescription</key> <string>語(yǔ)音識(shí)別權(quán)限</string> <key>NSSiriUsageDescription</key> <string>Siri權(quán)限</string> <key>NSRemindersUsageDescription</key> <string></string> <key>NSPhotoLibraryUsageDescription</key> <string>相冊(cè)權(quán)限</string> <key>kTCCServiceMediaLibrary</key> <string></string> <key>NSMotionUsageDescription</key> <string>運(yùn)動(dòng)權(quán)限</string> <key>NSMicrophoneUsageDescription</key> <string>麥克風(fēng)權(quán)限</string> <key>NSAppleMusicUsageDescription</key> <string>音樂(lè)權(quán)限</string> <key>NSLocationWhenInUseUsageDescription</key> <string>地理位置權(quán)限</string> <key>NSLocationUsageDescription</key> <string>地理位置權(quán)限</string> <key>NSLocationAlwaysUsageDescription</key> <string>地理位置權(quán)限</string> <key>NSHomeKitUsageDescription</key> <string></string> <key>NSHealthUpdateUsageDescription</key> <string>健康權(quán)限</string> <key>NSHealthShareUsageDescription</key> <string>健康權(quán)限</string> <key>NSContactsUsageDescription</key> <string>通訊錄權(quán)限</string> <key>NSCameraUsageDescription</key> <string>攝像頭權(quán)限</string> <key>NSCalendarsUsageDescription</key> <string>日歷權(quán)限</string>
下面,正式進(jìn)入本文要實(shí)現(xiàn)的功能的代碼編寫。
1. 使用Xcode的storyboard創(chuàng)建一個(gè)button和一個(gè)imageView
創(chuàng)建后的效果如下圖1所示。其中,imageView的尺寸影響最終顯示的效果尺寸,請(qǐng)根據(jù)實(shí)際情況設(shè)置。
2. 創(chuàng)建一個(gè)UIImage的類別(Category)
創(chuàng)建新文件,選擇“Objective-C File”,如下圖2所示:
在彈出的如圖3所示的對(duì)話框中,“File”寫入類別的名稱(本例中是DY),“File Type”選擇Category,“Class”選擇UIImage。然后點(diǎn)擊“Next”按鈕,將新文件保存。
3. 編寫類別中的代碼
UIImage+DY.h文件中
#import <UIKit/UIKit.h> @interface UIImage (DY) + (instancetype)circleOldImage:(UIImage *)originalImage borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor; @end
UIImage+DY.m文件中
#import "UIImage+DY.h" @implementation UIImage (DY) + (instancetype)circleOldImage:(UIImage *)originalImage borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor { // 1.加載原圖 UIImage *oldImage = originalImage; // 2.開(kāi)啟上下文 CGFloat imageW = oldImage.size.width + 2 * borderWidth; CGFloat imageH = oldImage.size.height + 2 * borderWidth; CGSize imageSize = CGSizeMake(imageW, imageH); UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0); // 3.取得當(dāng)前的上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 4.畫邊框(大圓) [borderColor set]; CGFloat bigRadius = imageW * 0.5; // 大圓半徑 CGFloat centerX = bigRadius; // 圓心 CGFloat centerY = bigRadius; CGContextAddArc(ctx, centerX, centerY, bigRadius, 0, M_PI * 2, 0); CGContextFillPath(ctx); // 畫圓 // 5.小圓 CGFloat smallRadius = bigRadius - borderWidth; CGContextAddArc(ctx, centerX, centerY, smallRadius, 0, M_PI * 2, 0); // 裁剪(后面畫的東西才會(huì)受裁剪的影響) CGContextClip(ctx); // 6.畫圖 [oldImage drawInRect:CGRectMake(borderWidth, borderWidth, oldImage.size.width, oldImage.size.height)]; // 7.取圖 UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext(); // 8.結(jié)束上下文 UIGraphicsEndImageContext(); return newImage; } @end
+(instancetype)circleOldImage:(UIImage )originalImage borderWidth:(CGFloat)borderWidth borderColor:(UIColor )borderColor方法的說(shuō)明:
- 這是一個(gè)類方法,最終返回的是一個(gè)UIImage的類;
- 方法中originalImage參數(shù)指的是從照片庫(kù)或者拍照后選中的照片(可能是經(jīng)過(guò)系統(tǒng)裁剪的);
- 方法中borderWidth參數(shù)指的是最終顯示的圓形圖像的邊框的寬度,可以可以根據(jù)自己的需要設(shè)置寬度;
- 方法中的borderColor參數(shù)指的是最終顯示的圓形圖像的邊框的顏色,可以可以根據(jù)自己的需要設(shè)置顏色。
4. 實(shí)現(xiàn)裁剪成圓形圖像并顯示
ViewController.h文件
#import <UIKit/UIKit.h> #import "UIImage+DY.h" //加載類別 @interface ViewController : UIViewController<UINavigationControllerDelegate, UIImagePickerControllerDelegate> //一定要添加這兩個(gè)Delegate @property (strong, nonatomic) UIImagePickerController *imagePickerController; - (IBAction)btnPressed:(id)sender; @property (strong, nonatomic) IBOutlet UIImageView *ablumImageView; @end
ViewController.m文件
#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]) { //首先判斷是否支持照片庫(kù),這個(gè)方法中的參數(shù)要和_imagePickerController.sourceType的值保持一致 //如果支持 _imagePickerController = [[UIImagePickerController alloc]init]; _imagePickerController.view.backgroundColor = [UIColor orangeColor]; _imagePickerController.sourceType = UIImagePickerControllerSourceTypePhotoLibrary; _imagePickerController.delegate = self; _imagePickerController.allowsEditing = YES; //該參數(shù)默認(rèn)是NO,建議設(shè)置為YES,否則裁剪成圓形圖片的方法將獲取到的是橢圓形的圖片,與你的預(yù)想大相徑庭 [self presentViewController:_imagePickerController animated:YES completion:nil]; } } - (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info { _ablumImageView.image = [UIImage circleOldImage:[info objectForKey:UIImagePickerControllerEditedImage] borderWidth:30.0f borderColor:[UIColor orangeColor]]; //該方法中Info的Key值“UIImagePickerControllerEditedImage”表示的是選擇裁剪后的圖片,如果使用這個(gè)Key值,則_imagePickerController.allowsEditing的值需要設(shè)置為YES。 //如果_imagePickerController.allowsEditing的值設(shè)置的NO,則這個(gè)Key的值應(yīng)該設(shè)置為UIImagePickerControllerOriginalImage /* info中的Key的值有如下幾個(gè): NSString *const UIImagePickerControllerMediaType ;指定用戶選擇的媒體類型(文章最后進(jìn)行擴(kuò)展) NSString *const UIImagePickerControllerOriginalImage ;原始圖片 NSString *const UIImagePickerControllerEditedImage ;修改后的圖片 NSString *const UIImagePickerControllerCropRect ;裁剪尺寸 NSString *const UIImagePickerControllerMediaURL ;媒體的URL NSString *const UIImagePickerControllerReferenceURL ;原件的URL NSString *const UIImagePickerControllerMediaMetadata;當(dāng)來(lái)數(shù)據(jù)來(lái)源是照相機(jī)的時(shí)候這個(gè)值才有效 */ [self dismissViewControllerAnimated:YES completion:nil]; } - (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker{ [self dismissViewControllerAnimated:YES completion:nil]; } @end
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解決Xcode8打包上傳構(gòu)建版本無(wú)效的辦法
這篇文章主要介紹的是自己在打包上傳項(xiàng)目的時(shí)候遇到的一個(gè)問(wèn)題,通過(guò)自己的努力一步步解決了,現(xiàn)將解決方法方法分享給大家,希望給同樣遇到這個(gè)問(wèn)題的朋友們能有所幫助,下面來(lái)一起看看吧。2016-09-09淺談強(qiáng)大易用支持URL Rewrite的iOS路由庫(kù)FFRouter
FRouter 是 iOS 中一個(gè)強(qiáng)大且易用的 URL 路由庫(kù),支持 URL Rewrite,基于匹配查找 URL,效率高。非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-10-10iOS應(yīng)用開(kāi)發(fā)中UITableView的分割線的一些設(shè)置技巧
這篇文章主要介紹了iOS應(yīng)用開(kāi)發(fā)中UITableView分割線的一些設(shè)置技巧,包括消除分割線的方法,示例代碼為傳統(tǒng)的Objective-C語(yǔ)言,需要的朋友可以參考下2016-03-03iOS動(dòng)畫解析之圓球加載動(dòng)畫XLBallLoading的實(shí)現(xiàn)
加載動(dòng)畫對(duì)大家來(lái)說(shuō)都不陌生,我們?cè)谄綍r(shí)都會(huì)遇見(jiàn),開(kāi)發(fā)中也必不可少,所以下面這篇文章主要給大家介紹了關(guān)于iOS動(dòng)畫解析之圓球加載動(dòng)畫XLBallLoading實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-11-11cmake ios終端下執(zhí)行提示錯(cuò)誤 iOS version not found, tested: [5.0;5.1;6
這篇文章主要介紹了cmake ios終端下執(zhí)行提示錯(cuò)誤 iOS version not found, tested: [5.0;5.1;6.0;6.1;7.0;8.3]的解決方案的相關(guān)資料,需要的朋友可以參考下2016-10-10ios實(shí)現(xiàn)底部PopupWindow的示例代碼(底部彈出菜單)
這篇文章主要介紹了ios實(shí)現(xiàn)底部PopupWindow的示例代碼(底部彈出菜單),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01IOS中(Xcode) DEBUG模式(RELEASE模式)控制NSLog輸出,NSLog輸出方式
這篇文章主要介紹了IOS中(Xcode) DEBUG模式(RELEASE模式)控制NSLog輸出,NSLog輸出方式的相關(guān)資料,需要的朋友可以參考下2016-11-11