IOS學習筆記39——拍照、從相簿選圖並對圖片進行裁剪

來源:互聯網
上載者:User

2013第一篇,大家新年快樂!感謝一直關注我部落格的同學們,有你們的支援我才有動力越做越好!有陣子沒寫部落格了,因為前陣子著實比較忙,沒時間整理,今天主要實現一個小Demo,我們知道在Instagram或Path上,頭像都是正方形的,得到這種頭像圖片肯定要對原圖進行截取,今天抽時間整理了下,先記錄如下!早前寫過一篇《IOS學習筆記22—檔案操作(NSFileManager)結合相簿小例子》,隨著iOS
SDK的升級,拍照及從相簿選取圖片的實現過程發生了一點小變化,比如UIImagePickerControllerDelegate的回調方法。現結合一個Demo簡要介紹其實現過程。首先,裁剪圖片的功能藉助了Github上的項目AGSimpleImageEditorView。不多說,一步步的看Demo的實現過程吧:


1.下載Github上這個項目工程到本地並將其拖入到自己的工程中(前提是你已經建立了工程),由於AGSimpleImageEditorView不支援ARC,所以還要做相應的配置,設定編譯器標籤-fno-objc-arc:



另外,由於使用到圖形處理和圖片處理,所以還要另外匯入兩個庫,如


完成後,按command+B編譯試試,如果沒問題,說明工程整合成功了,下面就可以開始編碼了,如果不成功,檢查一下錯誤來源,上述步驟是否完整。


代碼部分:以下均為關鍵代碼,具體細節沒有列舉,注釋寫的非常詳細,就不贅述了


2.建立PassImageDelegate協議作為在展示介面和截取介面間傳值的代理(這個demo用到兩種傳值方式,不是很瞭解的可以參考一下《IOS學習筆記30—兩個ViewController間傳值(一)》),建立CaptureViewController作為截取圖片功能的模組。PassImageDelegate部分代碼如下:

#import <Foundation/Foundation.h>@protocol PassImageDelegate <NSObject>-(void)passImage:(UIImage *)image;@end

CaptureViewController.h部分關鍵代碼,主要是初始化截取介面,截取成功後的處理等:

- (void)viewDidLoad{    [super viewDidLoad];        //添加導覽列和完成按鈕    UINavigationBar *naviBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];    [self.view addSubview:naviBar];        UINavigationItem *naviItem = [[UINavigationItem alloc] initWithTitle:@"圖片裁剪"];    [naviBar pushNavigationItem:naviItem animated:YES];        //儲存按鈕    UIBarButtonItem *doneItem = [[UIBarButtonItem alloc] initWithTitle:@"Done" style:UIBarButtonItemStylePlain target:self action:@selector(saveButton)];    naviItem.rightBarButtonItem = doneItem;        //image為上一個介面傳過來的圖片資源    editorView = [[AGSimpleImageEditorView alloc] initWithImage:self.image];    editorView.frame = CGRectMake(0, 0, self.view.frame.size.width ,  self.view.frame.size.width);    editorView.center = self.view.center;        //外邊框的寬度及顏色    editorView.borderWidth = 1.f;    editorView.borderColor = [UIColor blackColor];        //截取框的寬度及顏色    editorView.ratioViewBorderWidth = 5.f;    editorView.ratioViewBorderColor = [UIColor orangeColor];        //截取比例,我這裡按正方形1:1截取(可以寫成 3./2. 16./9. 4./3.)    editorView.ratio = 1;        [self.view addSubview:editorView];}//完成截取-(void)saveButton{    //output為截取後的圖片,UIImage類型    UIImage *resultImage = editorView.output;        //通過代理回傳給上一個介面顯示    [self.delegate passImage:resultImage];        [self dismissModalViewControllerAnimated:YES];}

3.主介面開啟選項列表並選擇拍照或是從相簿選擇圖片代碼:

//彈出選項列表選擇圖片來源- (IBAction)choseButtonClicked:(id)sender {    UIActionSheet *chooseImageSheet = [[UIActionSheet alloc] initWithTitle:nil delegate:self cancelButtonTitle:@"Cancel" destructiveButtonTitle:nil otherButtonTitles:@"Camera",@"Photo library", nil];    [chooseImageSheet showInView:self.view];}#pragma mark UIActionSheetDelegate Method-(void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex{    UIImagePickerController * picker = [[UIImagePickerController alloc] init];    picker.delegate = self;        switch (buttonIndex) {        case 0://Take picture                        if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]) {                picker.sourceType = UIImagePickerControllerSourceTypeCamera;                            }else{                NSLog(@"模擬器無法開啟相機");            }            [self presentModalViewController:picker animated:YES];            break;                    case 1://From album            picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;            [self presentModalViewController:picker animated:YES];            break;                    default:                        break;    }}

拍照或選擇圖片後的回調方法:

#pragma 拍照選擇照片協議方法-(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info{        [UIApplication sharedApplication].statusBarHidden = NO;        NSString *mediaType = [info objectForKey:UIImagePickerControllerMediaType];        NSData *data;        if ([mediaType isEqualToString:@"public.image"]){                //切忌不可直接使用originImage,因為這是沒有經過格式化的圖片資料,可能會導致選擇的圖片顛倒或是失真等現象的發生,從UIImagePickerControllerOriginalImage中的Origin可以看出,很原始,哈哈        UIImage *originImage = [info objectForKey:UIImagePickerControllerOriginalImage];                //圖片壓縮,因為原圖都是很大的,不必要傳原圖        UIImage *scaleImage = [self scaleImage:originImage toScale:0.3];                //以下這兩步都是比較耗時的操作,最好開一個HUD提示使用者,這樣體驗會好些,不至於阻塞介面        if (UIImagePNGRepresentation(scaleImage) == nil) {            //將圖片轉換為JPG格式的位元據            data = UIImageJPEGRepresentation(scaleImage, 1);        } else {            //將圖片轉換為PNG格式的位元據            data = UIImagePNGRepresentation(scaleImage);        }                //將位元據產生UIImage        UIImage *image = [UIImage imageWithData:data];                //將圖片傳遞給截取介面進行截取並設定回調方法(協議)        CaptureViewController *captureView = [[CaptureViewController alloc] init];        captureView.delegate = self;        captureView.image = image;        //隱藏UIImagePickerController本身的導覽列        picker.navigationBar.hidden = YES;        [picker pushViewController:captureView animated:YES];            }}

回調方法,顯示截取後的圖片

#pragma mark - 圖片回傳協議方法-(void)passImage:(UIImage *)image{    //將截取的圖片顯示在主介面    imageView.image = image;}

最後就是一段縮放圖片的方法:

#pragma mark- 縮放圖片-(UIImage *)scaleImage:(UIImage *)image toScale:(float)scaleSize{    UIGraphicsBeginImageContext(CGSizeMake(image.size.width*scaleSize,image.size.height*scaleSize));    [image drawInRect:CGRectMake(0, 0, image.size.width * scaleSize, image.size.height *scaleSize)];    UIImage *scaledImage = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();    return scaledImage;}

完成後到真機上運行,效果如下:

                        


拍照後選擇圖片後進入到裁剪介面,裁剪完成後顯示裁剪結果:

                        

加入我們的QQ群或公眾帳號請查看:Ryan's
zone公眾帳號及QQ群


覺得文章對你有用,歡迎關注我的新浪微博和我交流:@唐韌_Ryan

工程下載:Demo源碼

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.