Ios-generation and use of in-depth resolution QR codes, ios-Depth

Ios-generation and use of in-depth resolution QR codes, ios-Depth

A small demo is used to learn the QR code. There are four interfaces in total (the main interface is to generate the QR code interface, identify the QR code interface, and scan the QR code Interface) I. Introduction to the QR code 1. What is the QR code? Two-dimensional Barcode/QR code is a summary of the data symbol information recorded by a specific geometric chart in the black and white pattern distributed on the plane according to a certain rule: Some information is marked with a graphic record, convenient acquisition of information through graphic recognition 2 Application Scenario Information Acquisition (business card, MAP, Wi-Fi password, Information) mobile phone e-commerce (User scanning code, mobile phone Direct shopping orders) pay by phone (scan the QR code of the product and complete the payment through the mobile phone channel provided by the bank or a third party. build the QR code interface 1. A total of four interfaces can be built using storyBoard. 2. the four storyboards are placed on one interface, which is not beautiful and easy to mix up. Is there any optimization solution? You can separate the four storyboards and put them in a single interface. 3. How to separate the storyBoard into a single interface and link these interfaces )? StoryBoard reference can be used to replace storyBoard with a reference to maintain the connection between the storyBoard. 4. Final Effect

 

III. QR code generation 1. step 1.1: Create a filter CIFilter. The filter belongs to the CoreImage framework. To import the filter to this framework, it is often used to process the image (generate the glass effect/QR code) 1.2 The content set for the filter (assigned by kvc) must be of the NSData type. 1.3 The image obtained from the generated QR code is of the CIImage type. If used, the image needs to be converted. 2. the QR code image generated by running the program is blurred. Why? The size of the generated QR code image is 27*27, which is stretched too large, so it is not clear. 3. How to display the clear QR code? Apple provides an api (CIImage method) for image enlargement without affecting the definition.

1 // 1. the data type for creating Transform orginalImage is CIImage2 let scale = imageView. bounds. width/orginalImage. extent. width3 let transform = CGAffineTransformMakeScale (scale, scale) 4 // 2. enlarge image 5 let hdImage = orginalImage. imageByApplyingTransform (transform)

 

4. Set foreground image 4.1. Why do I need to set foreground images? Generally, there is a small image in the QR code center, that is, there is no foreground image in the foreground image generated by the QR code. You need to manually add the foreground image 4.2. How to add the foreground image? It is to combine the two images into one image, and you can easily use the drawing to complete the step of drawing 4.3. 4.31 enable the graphic context. 4.32 draw the QR code image to the graphic context. (The size of the QR code = the size of the graphic context) 4.33 draw a foreground image to the graphic context (the center of the foreground image = the center of the graphic context) 4.34 obtain a new image from the graphic context 4.35 disable the graphic context 4. QR code recognition 1. how can I obtain the QR code 1.1 in an album? 1.11 create a Photo Select controller 1.12 set the photo source type 1.13 set proxy 1.14 pop-up Controller

// 1. create a photo and select the Controller let ipc = UIImagePickerController () // 2. sets the source type ipc. sourceType =. photoLibrary // 3. sets the proxy ipc. delegate = self // 4. the Controller presentViewController (ipc, animated: true, completion: nil) is displayed. In the proxy method, the Controller func imagePickerController (picker: UIImagePickerController, didFinishPickingMediaWithInfo: [String: AnyObject] is selected {// select the Image view. image = info [UIImagePickerControllerOrigina LImage]? UIImage picker. dismissViewControllerAnimated (true, completion: nil )}

2. step 2.1 create a CIDetector object (Identification Tool) 2.2 get the image and convert it to CIIImage 2.3 identify the QR code in the image (get an array, the image may have multiple QR codes) 2.4 traverse the Array

// 1. create the reader let detector = CIDetector (ofType: CIDetectorTypeQRCode, context: nil, options: nil) // 2. obtain the image and convert it to CIIImage let image = imageView. image! Guard let ciImage = CIImage (image: image) else {return} // 3. identify the QR code in the image. let features = detector. featuresInImage (ciImage) // 4. traverse all elements in the array for f in features {// The feature type is CIFeature. convert it to the QR code type CIQRCodeFeature guard let qrCodeF = f? CIQRCodeFeature else {continue} // print the QR code information print (qrCodeF. messageString )}

5. scan the QR code (requires real machine operation) 1. scan QR code page build 1.1 is mainly to scan box build scan box add an ImageView, give ImageView an animation simulation is scanning (shock wave) 1.2 scan box is an image, shock wave is also an image, their positions and sizes are the same. To facilitate future changes to the widget positions, you can use a view to encapsulate the scan box and shock wave in the 1.3 scan animation (shock wave) animation. How can this happen? 1.31 set a margin between the bottom constraint of the shock wave and the parent control (view). 1.32 change the padding of the constraint to achieve the animation effect.

// 1. change the constraint (originally-240) scanViewBottomCons. constant = 240 // 2. execute the animation UIView. animateWithDuration (1.0) {UIView. setAnimationRepeatCount (MAXFLOAT) self. qrCodeView. layoutIfNeeded ()}

2. scan QR code 2.1 scan step 2.11 create a capture SESSION (you need to import the AVFoundation framework) 2.12 set input (CAMERA) 2.13 set output Metadata 2.14 add preview layer (NO) the preview layer is used to let the user know where the scan is. Generally, for the user experience, 2.15 is added to start scanning the source code: We recommend that you do not stick to it and copy it directly when using it.

// 1. Create a capture session let session = AVCaptureSession () // 2. Set the input (CAMERA) let device = AVCaptureDevice. defaultDeviceWithMediaType (AVMediaTypeVideo) guard let input = try? AVCaptureDeviceInput (device: device) else {return} session. addInput (input) // 3. set the output (Metadata) let output = AVCaptureMetadataOutput () // sets the proxy output. setMetadataObjectsDelegate (self, queue: dispatch_get_main_queue () session. addOutput (output) // set the output type of the output (the setting of this type must be added to the session) output. metadataObjectTypes = [AVMetadataObjectTypeQRCode] // 4. add a preview layer (not available) let previewLayer = AVCaptureVideoPreviewLayer (session: session) previewLayer. frame = view. bounds view. layer. insertSublayer (previewLayer, atIndex: 0) // 5. start scanning session. startRunning ()

 

3. Get scan result 3.1 set proxy and get result proxy method in proxy method

func captureOutput(captureOutput: AVCaptureOutput!, didOutputMetadataObjects metadataObjects: [AnyObject]!, fromConnection connection: AVCaptureConnection!) {  guard let objc = metadataObjects.last as? AVMetadataMachineReadableCodeObject else {    return  }    print(objc.stringValue) }

 

5. Set the scan area. 5.1 why do I need to set the scan area? Scan the QR code and find that as long as the QR Code enters the camera area, the scan request is to enter the scan box to scan 5.2. How can I set the scan area? Set the scan area by setting the output. rectOfInterest attribute.

// Set the scan area 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)

Note: The Coordinate System of the scan area is opposite to that of the screen (scan area x = screen coordinate system y)

5.3 Where can I write the scan area code? The scan area is an output attribute and should be written after the output code is created.