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程式碼（八）
奇舞週刊

來源：https://juejin.im/post/5c17791b6fb9a049f81932cc

相關文章