1. 程式人生 > >iOS 生成二維碼/條形碼

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開源庫中獲取。


作者微信:

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

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