iOS 生成二維碼/條形碼

QiShare發表於2018-12-17
iOS

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

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

生成二維碼/條形碼效果

一、生成二維碼

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，生成二維碼的步驟非常簡單：
1、準備好二維碼內容資料codeData;
2、使用CIQRCodeGenerator建立filter；
3、為filter設定input引數：inputMessage: 要生成的二維碼資料，inputCorrectionLevel: 二維碼容錯值；
4、通過filter.outputImage獲取到CIImage型別的二維碼圖片，但圖片不太清楚，需要做優化處理（見下文）；

PS:
1、列印filter.inputKeys可檢視不同name對應的input引數（比如CIQRCodeGenerator對應的inputCorrectionLevel引數）；
2、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%

二、生成條形碼

生成條形碼同樣依賴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;
}
複製程式碼

生成條形碼的步驟與生成二維碼的步驟一樣：
1、準備好條形碼內容資料codeData;
2、使用CICode128BarcodeGenerator建立filter；
3、為filter設定input引數：inputMessage:
要生成的條形碼資料，inputQuietSpace: 條形碼留白距離，inputBarcodeHeight: 條形碼高度；
4、通過filter.outputImage獲取到CIImage型別的二維碼圖片，但圖片不太清楚，需要做優化處理（見下文）；

三、優化二維碼/條形碼
1、圖片變高清

由上文可知，在生成二維碼/條形碼得到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;
}
複製程式碼
2、圖片加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開源庫中獲取。

作者微信：

iOS 生成二維碼/條形碼

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

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

相關文章