前言:利用一個小demo來對二維碼進行學(xué)習(xí),總共四個界面(主界面,生成二維碼界面,識別二維碼界面,掃描二維碼界面)
想要源碼點這里:QR-code
一.二維碼的介紹
1.什么是二維碼?
二維條碼/二維碼是用某種特定的幾何圖形按一定規(guī)律在平面分布的黑白相間的圖形記錄數(shù)據(jù)符號信息的
總結(jié): 用圖形記錄標(biāo)記一些信息,方便通過圖形識別來獲取信息
2 應(yīng)用場景
信息獲取（名片肯腕、地圖献宫、WIFI密碼、資料）
手機電商（用戶掃碼实撒、手機直接購物下單）
手機支付（掃描商品二維碼姊途，通過銀行或第三方支付提供的手機端通道完成支付)
微信添加好友
二.二維碼界面的搭建
1.總共四個界面,可以采用storyBoard來搭建
2.四個storyBoard放在一個界面,看起來不美觀,還很容易搞混,有沒有優(yōu)化方案?
可以把四個storyBoard分別開來,單獨放到一個界面里面
3.怎么把storyBoard單獨放在一個界面,而且還讓這些界面有聯(lián)系(連線)?
可以用storyBoard reference 來解決 就是用一個引用來代替storyBoard,保持storyBoard間的聯(lián)系(連線)
4.最終效果
三.二維碼的生成
1.生成二維碼的步驟
1.1 創(chuàng)建濾鏡 CIFilter
濾鏡屬于CoreImage框架,要導(dǎo)入該框架 該框架將常用來處理圖片(生成毛玻璃效果/二維碼)
1.2 給濾鏡設(shè)置內(nèi)容(用kvc方式賦值)
內(nèi)容必須為NSData類型
1.3 獲取生成的二維碼圖片
獲取的圖片是CIImage類型的,使用的話要進行轉(zhuǎn)換
2.運行程序發(fā)現(xiàn)生成的二維碼圖片很模糊,為什么?
生成為二維碼圖片大小為 27 * 27 被拉伸的太大,所以不清晰
3.怎么顯示清晰的二維碼?
蘋果提供一個api對圖片放大,還不影響清晰度
// 1.創(chuàng)建Transform
let scale = imageView.bounds.width / orginalImage.extent.width
let transform = CGAffineTransformMakeScale(scale, scale)
// 2.放大圖片
let hdImage = orginalImage.imageByApplyingTransform(transform)
4.設(shè)置前景圖片
4.1 為什么要設(shè)置前景圖片?
一般二維碼中心都有一張小的圖片,就是前景圖片
生成二維碼沒有前景圖片,需要手動添加前景圖片
4.2 怎么添加前景圖片?
就是把兩張圖片合成為一張圖片,用繪圖就可以輕松搞定
4.3 繪圖的步驟
4.31 開啟圖形上下文
4.32 將二維碼圖片畫到圖形上下文(二維碼的size = 圖形上下文的size)
4.33 將前景圖片畫到圖形上下文(前景圖片的center = 圖形上下文的center)
4.34 從圖形上下文獲取新的圖片
4.35 關(guān)閉圖形上下文
四.二維碼的識別
1.獲取相冊中的二維碼
1.1 怎么獲取相冊?
1.11 創(chuàng)建照片選擇控制器
1.12 設(shè)置照片的來源類型
1.13 設(shè)置代理
1.14 彈出控制器
// 1.創(chuàng)建照片選擇控制器
let ipc = UIImagePickerController()
// 2.設(shè)置來源的類型
ipc.sourceType = .PhotoLibrary
// 3.設(shè)置代理
ipc.delegate = self
// 4.彈出控制器
presentViewController(ipc, animated: true, completion: nil)
在代理方法中實現(xiàn) 選中圖片dismiss掉控制器
func imagePickerController(picker: UIImagePickerController,
didFinishPickingMediaWithInfo info: [String : AnyObject]) {
//選中照片
imageView.image = info[UIImagePickerControllerOriginalImage] as? UIImage
picker.dismissViewControllerAnimated(true, completion: nil)
}
2.識別二維碼的步驟
2.1 創(chuàng)建 CIDetector對象(識別器)
2.2 獲取圖片,并將圖片轉(zhuǎn)成 CIIImage
2.3 識別圖片中的二維碼(得到一個數(shù)組,圖片中可能有多個二維碼)
2.4 遍歷數(shù)組
// 1.創(chuàng)建識別器
let detector = CIDetector(ofType: CIDetectorTypeQRCode, context: nil, options: nil)
// 2.獲取圖片,并且將圖片轉(zhuǎn)成CIIImage
let image = imageView.image!
guard let ciImage = CIImage(image: image) else {
return
}
// 3.識別圖片中二維碼
let features = detector.featuresInImage(ciImage)
// 4.遍歷數(shù)組中所有的元素
for f in features {
guard let qrCodeF = f as? CIQRCodeFeature else {
continue
}
//打印二維碼的信息
print(qrCodeF.messageString)
}
五.掃描二維碼(需要真機操作)
1.掃描二維碼界面搭建
1.1 主要就是掃描框的搭建
掃描框中再加上一個ImageView,給ImageView一個動畫 模擬正在掃描(沖擊波)
1.2 掃描框是一張圖片,沖擊波也是一張圖片,他們的位置和尺寸是一樣的
為了方便以后更改控件的位置,可以用一個view把掃描框和沖擊波封裝在里面
1.3 掃描動畫(沖擊波)動畫怎么做?
1.31 設(shè)置沖擊波的底部約束相對于父控件(view)有一個間距
1.32 更改約束的間距,來達到動畫的效果
// 1.改變約束(原來約束為-240)
scanViewBottomCons.constant = 240
// 2.執(zhí)行動畫
UIView.animateWithDuration(1.0) {
UIView.setAnimationRepeatCount(MAXFLOAT)
self.qrCodeView.layoutIfNeeded()
}
2.掃描二維碼
2.1 掃描步驟
2.11 創(chuàng)建捕捉會話(需要導(dǎo)入AVFoundation框架)
2.12 設(shè)置輸入(攝像頭)
2.13 設(shè)置輸出 Metadata
2.14 添加預(yù)覽圖層(可以沒有)
預(yù)覽圖層是為了讓用戶知道掃描到哪里了,一般為了用戶體驗,都會添加
2.15 開始掃描
源代碼:建議不要死記,用的時候直接拷貝
// 1.創(chuàng)建捕捉會話
let session = AVCaptureSession()
// 2.設(shè)置輸入(攝像頭)
let device = AVCaptureDevice.defaultDeviceWithMediaType(AVMediaTypeVideo)
guard let input = try? AVCaptureDeviceInput(device: device) else {
return
}
session.addInput(input)
// 3.設(shè)置輸出(Metadata)
let output = AVCaptureMetadataOutput()
// 設(shè)置代理
output.setMetadataObjectsDelegate(self, queue: dispatch_get_main_queue())
session.addOutput(output)
// 設(shè)置output的輸出的類型(該類型的設(shè)置必須在添加到session之后)
output.metadataObjectTypes = [AVMetadataObjectTypeQRCode]
// 4.添加預(yù)覽圖層(可以沒有)
let previewLayer = AVCaptureVideoPreviewLayer(session: session)
previewLayer.frame = view.bounds
view.layer.insertSublayer(previewLayer, atIndex: 0)
// 5.開始掃描
session.startRunning()
3.獲取掃描結(jié)果
3.1設(shè)置代理,在代理方法中拿到結(jié)果
代理方法
func captureOutput(captureOutput: AVCaptureOutput!,
didOutputMetadataObjects metadataObjects: [AnyObject]!,
fromConnection connection: AVCaptureConnection!) {
guard let objc = metadataObjects.last as? AVMetadataMachineReadableCodeObject
else {
return
}
print(objc.stringValue)
}
5.設(shè)置掃描區(qū)域.
5.1 為什么要設(shè)置掃描區(qū)域?
掃描二維碼,發(fā)現(xiàn)只要二維碼進入攝像頭區(qū)域,就能直接掃描
要求是進入掃描框,才進行掃描
5.2 怎么設(shè)置掃描區(qū)域?
通過設(shè)置 output.rectOfInterest屬性來設(shè)置掃描區(qū)域
// 設(shè)置掃描的區(qū)域
let screenW = UIScreen.mainScreen().bounds.width
let screenH = UIScreen.mainScreen().bounds.height
let x : CGFloat = qrCodeView.frame.origin.x / screenW
let y : CGFloat = qrCodeView.frame.origin.y / screenH
let w : CGFloat = qrCodeView.frame.width / screenW
let h : CGFloat = qrCodeView.frame.height / screenH
output.rectOfInterest = CGRect(x: y, y: x, width: h, height: w)
注意:掃描區(qū)域的坐標(biāo)系與屏幕的坐標(biāo)系正好相反 ( 掃描區(qū)域x = 屏幕坐標(biāo)系 y)
5.3 設(shè)置掃描區(qū)域代碼寫到哪里?
掃描區(qū)域?qū)儆?輸出的一個屬性,應(yīng)該寫到創(chuàng)建輸出代碼的后邊
想要源碼點這里:QR-code
