iOS 生成二維碼/條形碼

級別：★★☆☆☆
標籤：「iOS CIFilter」「CIQRCodeGenerator」「CICode128BarcodeGenerator」「二維碼加logo」
做者： Xs·H
審校： QiShare團隊

---

接上文iOS 掃描二維碼/條形碼 及 iOS 掃描相冊圖片二維碼，本文介紹iOS 生成二維碼/條形碼的相關技術點。先看看示例效果：

1、生成二維碼

CoreImage框架中的CIFilter（經常使用來作濾鏡）提供了生成二維碼的方法，以下：

// 生成二維碼
+ (UIImage *)generateQRCode:(NSString *)code size:(CGSize)size {
    
    NSData *codeData = [code dataUsingEncoding:NSUTF8StringEncoding];
    //  使用CIQRCodeGenerator建立filter
    CIFilter *filter = [CIFilter filterWithName:@"CIQRCodeGenerator" withInputParameters:@{@"inputMessage": codeData, @"inputCorrectionLevel": QiInputCorrectionLevelH}];
    // 由filter.outputImage直接轉成的UIImage不太清楚，須要作高清處理
    UIImage *codeImage = [QiCodeManager scaleImage:filter.outputImage toSize:size];
    
    return codeImage;
}
複製代碼

藉助CIFilter，生成二維碼的步驟很是簡單：
一、準備好二維碼內容數據codeData;
二、使用CIQRCodeGenerator建立filter；
三、爲filter設置input參數：inputMessage: 要生成的二維碼數據，inputCorrectionLevel: 二維碼容錯值；
四、經過filter.outputImage獲取到CIImage類型的二維碼圖片，但圖片不太清楚，須要作優化處理（見下文）；

PS:
一、打印filter.inputKeys可查看不一樣name對應的input參數（好比CIQRCodeGenerator對應的inputCorrectionLevel參數）；
二、inputCorrectionLevel對應四個容錯率（以下），容錯率越大，容許二維碼污損的面積越大；
static NSString *QiInputCorrectionLevelL = @"L";//!< L: 7%
static NSString *QiInputCorrectionLevelM = @"M";//!< M: 15%
static NSString *QiInputCorrectionLevelQ = @"Q";//!< Q: 25%
static NSString *QiInputCorrectionLevelH = @"H";//!< H: 30%

2、生成條形碼

生成條形碼一樣依賴CIFilter，且與生成二維碼的方式相近，以下：

// 生成條形碼
+ (UIImage *)generateCode128:(NSString *)code size:(CGSize)size {
    
    NSData *codeData = [code dataUsingEncoding:NSUTF8StringEncoding];
    //  使用CICode128BarcodeGenerator建立filter
    CIFilter *filter = [CIFilter filterWithName:@"CICode128BarcodeGenerator" withInputParameters:@{@"inputMessage": codeData, @"inputQuietSpace": @.0}];
    // 由filter.outputImage直接轉成的UIImage不太清楚，須要作高清處理
    UIImage *codeImage = [QiCodeManager scaleImage:filter.outputImage toSize:size];
    
    return codeImage;
}
複製代碼

生成條形碼的步驟與生成二維碼的步驟同樣：
一、準備好條形碼內容數據codeData;
二、使用CICode128BarcodeGenerator建立filter；
三、爲filter設置input參數：inputMessage:
要生成的條形碼數據，inputQuietSpace: 條形碼留白距離，inputBarcodeHeight: 條形碼高度；
四、經過filter.outputImage獲取到CIImage類型的二維碼圖片，但圖片不太清楚，須要作優化處理（見下文）；

3、優化二維碼/條形碼

一、圖片變高清

由上文可知，在生成二維碼/條形碼獲得filter.outputImage後都作了處理，目的是將生成的圖片變高清。代碼以下：

// 縮放圖片(生成高質量圖片）
+ (UIImage *)scaleImage:(CIImage *)image toSize:(CGSize)size {
    
    //! 將CIImage轉成CGImageRef
    CGRect integralRect = image.extent;// CGRectIntegral(image.extent);// 將rect取整後返回，origin取捨，size取入
    CGImageRef imageRef = [[CIContext context] createCGImage:image fromRect:integralRect];
    
    //! 建立上下文
    CGFloat sideScale = fminf(size.width / integralRect.size.width, size.width / integralRect.size.height) * [UIScreen mainScreen].scale;// 計算須要縮放的比例
    size_t contextRefWidth = ceilf(integralRect.size.width * sideScale);
    size_t contextRefHeight = ceilf(integralRect.size.height * sideScale);
    CGContextRef contextRef = CGBitmapContextCreate(nil, contextRefWidth, contextRefHeight, 8, 0, CGColorSpaceCreateDeviceGray(), (CGBitmapInfo)kCGImageAlphaNone);// 灰度、不透明
    CGContextSetInterpolationQuality(contextRef, kCGInterpolationNone);// 設置上下文無插值
    CGContextScaleCTM(contextRef, sideScale, sideScale);// 設置上下文縮放
    CGContextDrawImage(contextRef, integralRect, imageRef);// 在上下文中的integralRect中繪製imageRef
    
    //! 從上下文中獲取CGImageRef
    CGImageRef scaledImageRef = CGBitmapContextCreateImage(contextRef);
    
    CGContextRelease(contextRef);
    CGImageRelease(imageRef);
    
    //! 將CGImageRefc轉成UIImage
    UIImage *scaledImage = [UIImage imageWithCGImage:scaledImageRef scale:[UIScreen mainScreen].scale orientation:UIImageOrientationUp];
    
    return scaledImage;
}
複製代碼

二、圖片加logo

對於二維碼而言，常常會看到在中間加上logo的樣式（微信公衆號的二維碼等），可以使用繪製的方式實現，以下：

// 合成圖片（code+logo）
+ (UIImage *)combinateCodeImage:(UIImage *)codeImage andLogo:(UIImage *)logo {
    
    UIGraphicsBeginImageContextWithOptions(codeImage.size, YES, [UIScreen mainScreen].scale);
    
    // 將codeImage畫到上下文中
    [codeImage drawInRect:(CGRect){.0, .0, codeImage.size.width, codeImage.size.height}];
    
    // 定義logo的繪製參數
    CGFloat logoSide = fminf(codeImage.size.width, codeImage.size.height) / 4;
    CGFloat logoX = (codeImage.size.width - logoSide) / 2;
    CGFloat logoY = (codeImage.size.height - logoSide) / 2;
    CGRect logoRect = (CGRect){logoX, logoY, logoSide, logoSide};
    UIBezierPath *cornerPath = [UIBezierPath bezierPathWithRoundedRect:logoRect cornerRadius:logoSide / 5];
    [cornerPath setLineWidth:2.0];
    [[UIColor whiteColor] set];
    [cornerPath stroke];
    [cornerPath addClip];
    
    // 將logo畫到上下文中
    [logo drawInRect:logoRect];
    
    // 從上下文中讀取image
    codeImage = UIGraphicsGetImageFromCurrentImageContext();
    
    UIGraphicsEndImageContext();
    
    return codeImage;
}
複製代碼

---

示例源碼QiQRCode可從GitHub的QiShare開源庫中獲取。

---

做者微信：

關注咱們的途徑有：
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公衆號)

推薦文章：
iOS 掃描二維碼/條形碼
iOS 瞭解Xcode Bitcode
iOS 重繪之drawRect
iOS 編寫高質量Objective-C代碼（八）
奇舞週刊