详解iOS 裁剪圆形图像并显示(类似于微信头像)

本文主要讲解如何从照片库选择一张照片后将其裁剪成圆形头像并显示,类似于微信头像那种模式。

本文的方法也适用于当时拍照获取的图像,方法类似,所以不再赘述。

本文主要是在iOS 10环境下使用,此时如果要使用使用系统照片库、照相机等功能需要授权,授权方法如下:

右键点击工程目录中的“Info.plist文件——>Open As ——>Source Code”,打开复制以下你在应用中使用的隐私权限设置(描述自己修改):

  <key>NSVideoSubscriberAccountUsageDescription</key>
  <string></string>
  <key>NSBluetoothPeripheralUsageDescription</key>
  <string>蓝牙权限</string>
  <key>NSSpeechRecognitionUsageDescription</key>
  <string>语音识别权限</string>
  <key>NSSiriUsageDescription</key>
  <string>Siri权限</string>
  <key>NSRemindersUsageDescription</key>
  <string></string>
  <key>NSPhotoLibraryUsageDescription</key>
  <string>相册权限</string>
  <key>kTCCServiceMediaLibrary</key>
  <string></string>
  <key>NSMotionUsageDescription</key>
  <string>运动权限</string>
  <key>NSMicrophoneUsageDescription</key>
  <string>麦克风权限</string>
  <key>NSAppleMusicUsageDescription</key>
  <string>音乐权限</string>
  <key>NSLocationWhenInUseUsageDescription</key>
  <string>地理位置权限</string>
  <key>NSLocationUsageDescription</key>
  <string>地理位置权限</string>
  <key>NSLocationAlwaysUsageDescription</key>
  <string>地理位置权限</string>
  <key>NSHomeKitUsageDescription</key>
  <string></string>
  <key>NSHealthUpdateUsageDescription</key>
  <string>健康权限</string>
  <key>NSHealthShareUsageDescription</key>
  <string>健康权限</string>
  <key>NSContactsUsageDescription</key>
  <string>通讯录权限</string>
  <key>NSCameraUsageDescription</key>
  <string>摄像头权限</string>
  <key>NSCalendarsUsageDescription</key>
  <string>日历权限</string>

下面,正式进入本文要实现的功能的代码编写。

1. 使用Xcode的storyboard创建一个button和一个imageView

创建后的效果如下图1所示。其中,imageView的尺寸影响最终显示的效果尺寸,请根据实际情况设置。

2. 创建一个UIImage的类别(Category)

创建新文件,选择“Objective-C File”,如下图2所示:

在弹出的如图3所示的对话框中,“File”写入类别的名称(本例中是DY),“File Type”选择Category,“Class”选择UIImage。然后点击“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.开启上下文
  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.取得当前的上下文
  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);
  // 裁剪(后面画的东西才会受裁剪的影响)
  CGContextClip(ctx);

  // 6.画图
  [oldImage drawInRect:CGRectMake(borderWidth, borderWidth, oldImage.size.width, oldImage.size.height)];

  // 7.取图
  UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

  // 8.结束上下文
  UIGraphicsEndImageContext();

  return newImage;
}

@end

+(instancetype)circleOldImage:(UIImage )originalImage borderWidth:(CGFloat)borderWidth borderColor:(UIColor )borderColor方法的说明:

  1. 这是一个类方法,最终返回的是一个UIImage的类;
  2. 方法中originalImage参数指的是从照片库或者拍照后选中的照片(可能是经过系统裁剪的);
  3. 方法中borderWidth参数指的是最终显示的圆形图像的边框的宽度,可以可以根据自己的需要设置宽度;
  4. 方法中的borderColor参数指的是最终显示的圆形图像的边框的颜色,可以可以根据自己的需要设置颜色。

4. 实现裁剪成圆形图像并显示

ViewController.h文件

#import <UIKit/UIKit.h>
#import "UIImage+DY.h" //加载类别

@interface ViewController : UIViewController<UINavigationControllerDelegate, UIImagePickerControllerDelegate> //一定要添加这两个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]) {

    //首先判断是否支持照片库,这个方法中的参数要和_imagePickerController.sourceType的值保持一致

    //如果支持

    _imagePickerController = [[UIImagePickerController alloc]init];

    _imagePickerController.view.backgroundColor = [UIColor orangeColor];
    _imagePickerController.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
    _imagePickerController.delegate = self;
    _imagePickerController.allowsEditing = YES; //该参数默认是NO,建议设置为YES,否则裁剪成圆形图片的方法将获取到的是椭圆形的图片,与你的预想大相径庭

    [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”表示的是选择裁剪后的图片,如果使用这个Key值,则_imagePickerController.allowsEditing的值需要设置为YES。

  //如果_imagePickerController.allowsEditing的值设置的NO,则这个Key的值应该设置为UIImagePickerControllerOriginalImage

  /*
  info中的Key的值有如下几个:

  NSString *const UIImagePickerControllerMediaType ;指定用户选择的媒体类型(文章最后进行扩展)
NSString *const UIImagePickerControllerOriginalImage ;原始图片
NSString *const UIImagePickerControllerEditedImage ;修改后的图片
NSString *const UIImagePickerControllerCropRect ;裁剪尺寸
NSString *const UIImagePickerControllerMediaURL ;媒体的URL
NSString *const UIImagePickerControllerReferenceURL ;原件的URL
NSString *const UIImagePickerControllerMediaMetadata;当来数据来源是照相机的时候这个值才有效

  */

  [self dismissViewControllerAnimated:YES completion:nil];

}
- (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker{

  [self dismissViewControllerAnimated:YES completion:nil];

}

@end

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 简单谈谈axios中的get,post方法

    学习vue和nodejs的过程当中,涉及到了axios,今天为了测试,写了get和post两个方法来跟node服务端交互,结果因为header和参数弄了好久,在此记录一下,同时分享: 由于刚接触axios,在测试方法中,写的都是很简单的东西,不过能够实现基础功能,大神看到的话..非常欢迎指导.. //GET方法 axios.get(url, { params: { 'key': 'value' } }).then(function (response) { alert(''.concat(res

  • IOS 开发之UITextField的光标操作扩展

    IOS 开发之UITextField的光标操作扩展 简介 在iOS开发中,有时候需要完全自主的定义键盘,用于完整的单词输入,例如计算机应用中,需要一次性的输入sin(,在移动光标时要完整的跳过sin(,在删除时也要完整的删除,这就需要对光标的位置进行精确控制,而ios并没有相关的函数可以直接操作光标,只给出了选择某个区域的功能,本文将介绍基于区域选择设计的UITextField扩展,用于获取光标位置以及移动光标. 实现原理 光标位置的获取 在textField中,有一个属性称之为selected

  • IOS 长链接与短链接之间的转换

    IOS 长链接与短链接之间的转换 首先需要将字符串使用md5加密,添加NSString的md5的类别方法如下 .h文件 #import <CommonCrypto/CommonDigest.h> @interface NSString (md5) -(NSString *) md5HexDigest; @end .m文件 #import "NSString+md5.h" @implementation NSString (md5) - (NSString *) md5Hex

  • safari调试iOS app web页面的步骤

    Overview 当下移动端开发过程中大量使用前段H5.js等等技术,而这些web页面的调试在Xcode控制台中不太明了,经常我们移动app运行了就是方法,但是不能显示响应的效果,这时候或许就是已经报错了,但是我们在Xcode控制台是看不到这些错误.这时候我们就可以用功能强大的Safari浏览器来开启开发模式连接iPhone来调试app脸面的web页面了. Safari设置 打开Safari偏好者设置,选中"高级菜单",在页面最下方看到"在菜单中显示开发菜单"的复选

  • iOS通过Runtime实现友盟统计的实例代码

    在友盟官网可以看到相应的步骤,申请appkey,导入SDK,然后在AppDelegate里面写入相应的代码,下面就是关键的代码: 实现页面的统计需要在每个UIViewController中配对调用如下方法: - (void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; [MobClick beginLogPageView:@"PageOne"];//("PageOne"为页面名称,可

  • iOS实时录音和播放功能

    需求:最近公司需要做一个楼宇对讲的功能:门口机(连接WIFI)拨号对室内机(对应的WIFI)的设备进行呼叫,室内机收到呼叫之后将对收到的数据进行UDP广播的转发,手机(连接对应的WIFI)收到视频流之后,实时的展示视频数据(手机可以接听,挂断,手机接听之后,室内机不展示视频,只是进行转发.) 简单点说就是手机客户端需要做一个类似于直播平台的软件,可以实时的展示视频,实时的播放接收到的声音数据,并且实时将手机麦克风收到的声音回传给室内机,室内机负责转发给门口机. 这篇文章介绍iOS怎么进行实时的录

  • 详解Vue 2.0封装axios笔记

    前言 单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染.Ajax.websocket等),今天我们主要讲解Ajax部分. 最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch polyfill 或是 axios.superagent 等等都可以起到同等的效果,vue-resource 提供的价值和其维护成本相比并不划算,所以决定在不久以后取消对 vue-resource 的官方推荐.已有的用户可以继续使用,但以后不再把

  • 详解iOS 裁剪圆形图像并显示(类似于微信头像)

    本文主要讲解如何从照片库选择一张照片后将其裁剪成圆形头像并显示,类似于微信头像那种模式. 本文的方法也适用于当时拍照获取的图像,方法类似,所以不再赘述. 本文主要是在iOS 10环境下使用,此时如果要使用使用系统照片库.照相机等功能需要授权,授权方法如下: 右键点击工程目录中的"Info.plist文件-->Open As -->Source Code",打开复制以下你在应用中使用的隐私权限设置(描述自己修改): <key>NSVideoSubscriberAc

  • 详解iOS Method Swizzling使用陷阱

    在阅读团队一项目源码时,发现Method Swizzling的写法有些瑕疵.这篇文章主要就介绍iOS Method Swizzling的正确写法应该是什么样的. 下面是iOS Method Swizzling的一种实现: + (void)load { Class class = [self class]; SEL fromSelector = @selector(func); SEL toSelector = @selector(easeapi_func); Method fromMethod

  • 详解 iOS 系统中的视图动画

    动画为用户界面的状态转换提供了流畅的可视化效果, 在 iOS 中大量使用了动画效果, 包括改变视图位置. 大小. 从可视化树中删除视图, 隐藏视图等. 你可以考虑用动画效果给用户提供反馈或者用来实现有趣的特效. 在 iOS 系统中, Core Animation 提供了内置的动画支持, 创建动画不需要任何绘图的代码, 你要做的只是激发指定的动画, 接下来就交给 Core Animation 来渲染, 总之, 复杂的动画只需要几行代码就可以了. 哪些属性可以添加动画效果 根据 iOS 视图编程指南

  • 详解Python+OpenCV实现图像二值化

    目录 一.图像二值化 1.效果 2.源码 二.图像二值化(调节阈值) 1.源码一 2.源码二 一.图像二值化 1.效果 2.源码 import cv2 import numpy as np import matplotlib.pyplot as plt # img = cv2.imread('test.jpg') #这几行是对图像进行降噪处理,但事还存在一些问题. # dst = cv2.fastNlMeansDenoisingColored(img,None,10,10,7,21) # plt

  • 详解IOS UITableViewCell 的 imageView大小更改

    详解IOS UITableViewCell 的 imageView大小更改 实例代码: - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ static NSString *CellIdentifier = @"Cell"; UITableViewCell *cell = [tableView dequeueReusableCell

  • 详解IOS开发中生成推送的pem文件

    详解IOS开发中生成推送的pem文件 具体步骤如下: 首先,需要一个pem的证书,该证书需要与开发时签名用的一致. 具体生成pem证书方法如下: 1. 登录到 iPhone Developer Connection Portal(http://developer.apple.com/iphone/manage/overview/index.action )并点击 App IDs 2. 创建一个不使用通配符的 App ID .通配符 ID 不能用于推送通知服务.例如,  com.itotem.ip

  • 详解IOS中文件路径判断是文件还是文件夹

    详解IOS中文件路径判断是文件还是文件夹 方法1 + (BOOL)isDirectory:(NSString *)filePath { BOOL isDirectory = NO; [[NSFileManager defaultManager] fileExistsAtPath:filePath isDirectory:&isDirectory]; return isDirectory; } 方法2 + (BOOL)isDirectory:(NSString *)filePath { NSNum

  • 详解IOS串行队列与并行队列进行同步或者异步的实例

    详解IOS串行队列与并行队列进行同步或者异步的实例 IOS中GCD的队列分为串行队列和并行队列,任务分为同步任务和异步任务,他们的排列组合有四种情况,下面分析这四种情况的工作方式. 同步任务,使用GCD dispatch_sync 进行派发任务 - (void)testSync { dispatch_queue_t serialQueue = dispatch_queue_create("com.zyt.queue", DISPATCH_QUEUE_SERIAL); dispatch_

  • 详解IOS 单例的两种方式

    详解IOS 单例的两种方式 方法一: #pragma mark - #pragma mark sharedSingleton methods //单例函数 static RtDataModel *sharedSingletonManager = nil; + (RtDataModel *)sharedManager { @synchronized(self) { if (sharedSingletonManager == nil) { sharedSingletonManager = [[sel

  • 详解 IOS下int long longlong的取值范围

    详解 IOS下int long longlong的取值范围 32bit下: unsigned int 0-4294967295 int -2147483648-2147483647 unsigned long 和int一样 long 和int一样 long long的最大值:9223372036854775807 long long的最小值:-9223372036854775808 unsigned long long的最大值:1844674407370955161 __int64的最大值:92

随机推荐