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
时间: 2024-10-11 09:12:20

iOS 裁剪圆形图像并显示(类似于微信头像)的相关文章

iOS 画圆形头像

demo下载地址:http://pan.baidu.com/s/1mgBf6YG _logoImageView.image = [self getEllipseImageWithImage:[UIImage imageNamed:@"1_wsq724439564.jpg"]]; -(UIImage*)getEllipseImageWithImage:(UIImage*)originImage { CGFloat padding = 5;//圆形图像距离图像的边距 UIColor* ep

第二章:图像的显示 和运行完整程序代码

VC++图像处理程序设计(第2版)    杨淑莹 编著     边奠英 主审 第二章 图像的显示 Joanna-In-Hdu 手工打,印象更深刻 使用工具 VS2010 mfc 颜色表中装有该文件所有颜色的R.G.B各分量,每个像素的像素值是颜色索引表的索引号. 通常所称的VGA显示模式是8位显示模式,能显示256种颜色,即0~255进行编号,每一个编号对应一种颜色,颜色的编号就是颜色的索引号. 屏幕上的每一个像素对应一个颜色号,不同像素的颜色对应不同的调色板颜色值.图像的像素值并不是颜色值,而

Android高仿微信头像裁剪

最近公司的APP很多用户反应无法上传头像,于是打算修改原来头像裁剪的代码.参考微信.QQ.唱吧头像裁剪的操作,决定就仿微信头像裁剪来上传用户头像,在Android大神鸿洋的一篇高仿微信头像的博客(博客地址结尾会贴出来)的基础上加了一些代码,加的代码主要增加如下的功能: 1.增加对大图的处理,缩放到我们裁剪框的大小. 2.裁剪后的图片保存到临时文件里,把临时文件的路径返回到需要处理的界面,因为在三星S4传byte数组返回数据时会闪退,传路径则正常. 3.对有些系统返回旋转过的图片进行处理. 这个功

PHP图片裁剪函数(图像不变形)

PHP图片裁剪函数(图像不变形) ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80

Qt可显示基本的图像类型,利用QImage、QPxmap类可以实现图像的显示

Qt可显示基本的图像类型,利用QImage.QPxmap类可以实现图像的显示,并且利用类中的方法可以实现图像的基本操作(缩放.旋转). 1. Qt可显示的图像类型 参考Qt的帮助文档,可支持的类型,即可以直接读取并显示的格式有BMP.GIF.JPG.JPEG.PNG.TIFF.PBM.PGM.PPM.XBM.XPM. 2. Qt用如何显示图像 通常用QLabel显示图像,QLabel类有setPixmap()函数,可以用来显示图像.也可以直接用QPainter画出图像. 如果图像过大,直接用QL

Qt中图像的显示与基本操作

Qt可显示基本的图像类型,利用QImage.QPxmap类可以实现图像的显示,并且利用类中的方法可以实现图像的基本操作(缩放.旋转). 1. Qt可显示的图像类型 参考Qt的帮助文档,可支持的类型,即可以直接读取并显示的格式有BMP.GIF.JPG.JPEG.PNG.TIFF.PBM.PGM.PPM.XBM.XPM. 2. Qt用如何显示图像 通常用QLabel显示图像,QLabel类有setPixmap()函数,可以用来显示图像.也可以直接用QPainter画出图像. 如果图像过大,直接用QL

IOS APP圆形图片的实现

1 //设置圆形cornerRadius,是宽或高的一半 2 3 _imageView.layer.masksToBounds = YES; 4 5 6 7 CGFloat w = _imageView.frame.size.width / 2; 8 9 _imageView.layer.cornerRadius = w; 10 11 12 13 //设置边框宽度及颜色 14 15 [_imageView.layersetBorderWidth:2]; 16 17 [_imageView.lay

Simulink载入图像并显示

在simulink中载入图像并显示的方法如下: 1, 建立simulink空文档: 2, 加入"Image From File",该Block位于Computer Virsion Systems Toolbox的"sources"中: 3,点击Image FROM file, 设置图像路径 3,加入"Video Viewer", 该Block位于Computer Virsion Systems Toolbox的"sinks"中

[IOS Tableview] cell自定义view显示错误问题

问题介绍:按照tableviewcell的tag自定义cell的view显示的时候,会出现拖动时显示错误情况. 我做的是一个下载界面,我为了简化问题,就把问题设定为,tag==1的cell已下载,加载时就把已下载的cell的label显示为蓝色.其余默认为黑. 比如我在代码里,想要tag==1的cell的label字体为蓝色,这样写就会出现上下拖动时tag==11的也出现蓝色(视具体情况而定). if([cell.tag==1){ //tag==1就把label显示为蓝色 cell.label.