iOS-合成圖片(長圖)

合成圖片

• 直接合成圖片還是比較簡單的，現在的難點是要把，通過文本輸入的一些基本數據也合成到一張圖片中，如果有多長圖片就合成長圖。
• 現在的實現方法是，把所有的文本消息格式化，然后繪制到一個UILable中，然后自適應高度，然后把這個控件截取出來一張圖片，和拍的照片合成一張圖片。
• 

示例界面如下

• 1、基本信息截圖

• 

• 2、一張圖片

• 

• 3、兩張圖片

• 

• 4、三張圖片

• 

具體代碼

• 首先初始化界面

/// 初始化子控件
- (void)setupViews {
    //
    _nameField = [[UITextField alloc] initWithFrame:CGRectMake(0, 22, ScreenWidth, 44)];
    _nameField.placeholder = @"請輸入姓名";
    [self.view addSubview:_nameField];
    
    _ageField = [[UITextField alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(_nameField.frame), ScreenWidth, 44)];
    _ageField.placeholder = @"請輸入年齡";
    [self.view addSubview:_ageField];
    
    _infoField = [[UITextField alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(_ageField.frame), ScreenWidth, 44)];
    _infoField.placeholder = @"請輸入簡介";
    [self.view addSubview:_infoField];
    
    _timeField = [[UITextField alloc] initWithFrame:CGRectMake(0,CGRectGetMaxY(_infoField.frame),ScreenWidth, 44)];
    _timeField.text = [self getCurrentDate];
    _timeField.enabled = NO;
    [self.view addSubview:_timeField];

    
    _collectionView = [[SLQCollectionView alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(_timeField.frame),ScreenWidth, 100)];
    [_collectionView setTitle:@"相關照片"];
    __weak typeof (self)weakSelf = self;
    _collectionView.heightAndPhotosBlock = ^(CGFloat height,NSArray *photos){
        [weakSelf.photoArr removeAllObjects];
        weakSelf.photoArr = [NSMutableArray arrayWithArray:photos];
    };

    [self.view addSubview:_collectionView];
    
    _mergePhoto = [[UIButton alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(_collectionView.frame), 100, 44)];
    [_mergePhoto setTitle:@"發布" forState:UIControlStateNormal];
    _mergePhoto.backgroundColor = [UIColor redColor];
    [_mergePhoto addTarget:self action:@selector(postPhoto) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:_mergePhoto];
    
    _mergePhoto.center = CGPointMake(ScreenWidth/2, _mergePhoto.center.y);
    
    _contentLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, 200)];
    _contentLabel.hidden = YES;
    
    [self.view addSubview:_contentLabel];
    
}

• 發布圖片

/// 發布圖片
- (void)postPhoto {
    self.postImage = nil;
    
    NSString *name = self.nameField.text;
    NSString *age = self.ageField.text;
    NSString *info = self.infoField.text;
    NSString *time = self.timeField.text;
    
    NSString *content = [NSString stringWithFormat:@"姓名：%@\n年齡：%@\n簡介：%@\n時間：%@\n相關圖片：",name,age,info,time];
    self.contentLabel.numberOfLines = 0;
    self.contentLabel.text = content;
    [self.contentLabel sizeToFit];
    self.contentLabel.hidden = NO;
    [self.contentLabel setNeedsDisplay];

    
    if (self.photoArr.count) {
        for (NSInteger i = 0 ; i < self.photoArr.count; i ++) {
            
            self.postImage = [self mergeImages:self.photoArr[i]];
        }
    }
}

• 合成圖片

// 獲得頂部圖片
- (UIImage *)getImageFromView
{
    // 已經合成過一次,就去上次的合成結果
    if(self.postImage) {
        return self.postImage;
    }else
    {
        UIGraphicsBeginImageContextWithOptions(self.contentLabel.frame.size, NO, 0.0);
        //獲取圖像
        [self.contentLabel.layer renderInContext:UIGraphicsGetCurrentContext()];
        UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        self.contentLabel.hidden = YES;
        // 保存圖片，需要轉換成二進制數據
        [self saveImageToPhotos:image];
        self.contentLabel.hidden = YES;
        self.textImage = image;
        return image;
    }
}

// 獲得待合成圖片
- (UIImage *)mergeImages:(UIImage *)mergeImage
{
    UIImage *newimage = mergeImage;
    UIImage *postImage = [self getImageFromView];
    // 獲取位圖上下文
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(ScreenWidth, postImage.size.height + ScreenHeight - self.textImage.size.height), NO, 0.0);
    [newimage drawInRect:CGRectMake(0, postImage.size.height, ScreenWidth, ScreenHeight - self.textImage.size.height)];

    [postImage drawAtPoint:CGPointMake(0,0)];
    // 獲取位圖
    UIImage *saveimage = UIGraphicsGetImageFromCurrentImageContext();
    // 關閉位圖上下文
    UIGraphicsEndImageContext();
    // 保存圖片，需要轉換成二進制數據
    [self saveImageToPhotos:saveimage];
    return saveimage;
}
- (void)saveImageToPhotos:(UIImage*)savedImage
{
    UIImageWriteToSavedPhotosAlbum(savedImage, self, @selector(image:didFinishSavingWithError:contextInfo:), NULL);
}

// 指定回調方法
- (void)image: (UIImage *) image didFinishSavingWithError: (NSError *) error contextInfo: (void *) contextInfo
{
    NSString *msg = nil ;
    if(error != NULL){
        msg = @"保存圖片失敗" ;
    }else{
        msg = @"保存圖片成功" ;
    }
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"保存圖片結果提示"
                                                    message:msg
                                                   delegate:self
                                          cancelButtonTitle:@"確定"
                                          otherButtonTitles:nil];
    [alert show];
}

• 屬性聲明

#define ScreenHeight [UIScreen mainScreen].bounds.size.height
#define ScreenWidth [UIScreen mainScreen].bounds.size.width

#import "ViewController.h"
#import "SLQCollectionView.h"

@interface ViewController ()
/// UILabel
@property (nonatomic, strong) UILabel *contentLabel;
/// UITextField
@property (nonatomic, strong) UITextField *nameField;
/// UITextField
@property (nonatomic, strong) UITextField *ageField;
/// UITextField
@property (nonatomic, strong) UITextField *infoField;
/// UITextField
@property (nonatomic, strong) UITextField *timeField;
/// SLQCollectionView
@property (nonatomic, strong) SLQCollectionView *collectionView;
/// SLQCollectionView
@property (nonatomic, strong) UIButton *mergePhoto;
/// 圖片數組
@property (nonatomic, strong) NSMutableArray *photoArr;

/// 文字圖片
@property (nonatomic, strong) UIImage *textImage;
/// 將要保存的圖片
@property (nonatomic, strong) UIImage *postImage;
@end

總結

• 合成長圖原來也這么簡單，哈哈