iOS自定义相机:带拍摄区域边框、半透明遮罩层、点击屏幕对焦、自动裁剪(含demo源码)

2021-07-05 20:54:04 浏览数 (1)

前言

  • 需求背景

人脸比对需要比对正面照和持证照,正面照如果是竖的话,会比对不上,因此拍照保存的照片要正向保存

  • 身份证正反面相机(加一个长方形的框框并裁剪身份证照片)

1、从CSDN资源下载完整demo:https://download.csdn.net/download/u011018979/14045495 2、 原理文章:https://kunnan.blog.csdn.net/article/details/112309871

  • 手持证件照相机:https://kunnan.blog.csdn.net/article/details/112311308

从CSDN资源下载【手持证件照】完整demo源码:https://download.csdn.net/download/u011018979/14040077 1 手持证件照的裁剪算法:根据图片方向进行裁剪 2 屏幕适配:为了避免框框视图的frame超出视图范围,导致半透明黑色遮罩无法渲染maskLayer;框框视图的布局采取宽为屏幕宽度,高按照比例进行计算

I、案例1:加一个长方形的框框并裁剪身份证照片(无半透明遮罩层)

  • 需求:拍身份证的时候加一个长方形的框框
  • 功能目的:人脸比对,需要比对正面照和持证照,正面照如果是竖的话,会比对不上,因此拍照保存的照片要正向保存。

目前产品没要求做边缘识别,代理商业务员能大概按样例图拍就行;关于边缘识别的请看这篇文章:https://kunnan.blog.csdn.net/article/details/111197419

在这里插入图片描述

1.1 demo 源码

从CSDN下载Demo源码:https://download.csdn.net/download/u011018979/19149017

代码语言:javascript复制
/**
 回调照片的block
 */
typedef void(^ImageBlock)(UIImage *image);

@interface CRMCaptureIDPicViewController : UIViewController

@property (nonatomic, copy) ImageBlock imageblock;


@end



  • 核心属性
代码语言:javascript复制
#import <Photos/Photos.h>

#import "CRMCaptureIDPicViewController.h"

@interface CRMCaptureIDPicViewController ()<AVCaptureMetadataOutputObjectsDelegate,UIAlertViewDelegate,CAAnimationDelegate>

//捕获设备,通常是前置摄像头,后置摄像头,麦克风(音频输入)
@property(nonatomic)AVCaptureDevice *device;
//AVCaptureDeviceInput 代表输入设备,他使用AVCaptureDevice 来初始化
@property(nonatomic)AVCaptureDeviceInput *input;
//当启动摄像头开始捕获输入
@property(nonatomic)AVCaptureMetadataOutput *output;
//输出
@property (nonatomic)AVCaptureStillImageOutput *ImageOutPut;
//session:由他把输入输出结合在一起,并开始启动捕获设备(摄像头)
@property(nonatomic)AVCaptureSession *session;
//图像预览层,实时显示捕获的图像
@property(nonatomic)AVCaptureVideoPreviewLayer *previewLayer;
//设备
@property (nonatomic, strong)AVCaptureDevice *deveice;
//拍照
@property (nonatomic, strong) UIButton *PhotoButton;

  • 自定义相机
代码语言:javascript复制
#pragma mark - 自定义相机
- (void)customCamera{
    
    //生成会话,用来结合输入输出
    self.session = [[AVCaptureSession alloc]init];
    if ([self.session canSetSessionPreset:AVCaptureSessionPresetPhoto]) {
        self.session.sessionPreset = AVCaptureSessionPresetPhoto;
    }
    if ([self.session canAddInput:self.input]) {
        [self.session addInput:self.input];
    }
    
    if ([self.session canAddOutput:self.ImageOutPut]) {
        [self.session addOutput:self.ImageOutPut];
    }
    
    [self.view.layer addSublayer:self.previewLayer];
    
    //开始启动
    [self.session startRunning];
    if ([self.device lockForConfiguration:nil]) {
        if ([self.device isFlashModeSupported:AVCaptureFlashModeAuto]) {
            [self.device setFlashMode:AVCaptureFlashModeAuto];
        }
        //自动白平衡
        if ([self.device isWhiteBalanceModeSupported:AVCaptureWhiteBalanceModeAutoWhiteBalance]) {
            [self.device setWhiteBalanceMode:AVCaptureWhiteBalanceModeAutoWhiteBalance];
        }
        
        [self.device unlockForConfiguration];
    }
    
}

1.2 控制屏幕旋转方向

代码语言:javascript复制
- (BOOL)shouldAutorotate {
    //CRMSignatureViewController4EditMerchantInfo
    //判断类型,签名的上一个界面需要自动旋转回来

    return YES;
}
- (UIInterfaceOrientationMask)supportedInterfaceOrientations {
    return UIInterfaceOrientationMaskPortrait;
}
-(UIInterfaceOrientation)preferredInterfaceOrientationForPresentation{
    return UIInterfaceOrientationPortrait;
}

更多信息和案例请看【电子签名文章】:

  • 【iOS 只旋转自己想要旋转的屏幕(内含demo源码),应用场景:电子签名】 关键步骤:1、viewWillAppear设置横屏2、viewWillDisappear 进行设置竖屏 https://kunnan.blog.csdn.net/article/details/104796781

1.3 封装富文本API

在这里插入图片描述

  • 【封装富文本API,采用block实现链式编程】(block 的妙用:结合block和方法的优点实现iOS的链式编程) https://kunnan.blog.csdn.net/article/details/107835195
代码语言:javascript复制
#import <ChainAttributedString/NSMutableAttributedString Chain.h>


        NSMutableAttributedString *xx  = [[NSMutableAttributedString alloc]init];
        
        xx.kn_addString(@"请调整好光线,将身份证").kn_fontColor(rgb(255,255,255)).kn_addString(@"人像面").kn_fontColor(rgb(225,66,66)).kn_addString(@"移入框内").kn_fontColor(rgb(255,255,255));

        
        
        
        
        
        _tishiLabel.attributedText = xx;

  • 旋转90度
代码语言:javascript复制
        _tishiLabel.transform = CGAffineTransformMakeRotation(M_PI/2);

        
        [self.view addSubview:_tishiLabel];

        
        __weak __typeof__(self) weakSelf = self;
        

        [_tishiLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            
            
            make.centerX.equalTo(weakSelf.view.mas_right).offset(kAdjustRatio(- 23));

            
            
            make.centerY.offset(kAdjustRatio(0));

                    
        }];

0 人点赞