iOS 定制多样式二维码

二维码/条形码是按照某种特定的几何图形按一定规律在平台(一维/二维方向上)分布的黑白相间的图形纪录符号信息。使用若干个与二进制对应的几何形体来表示文字数值信息。

最常见的二维码功能包括信息获取、网站跳转、电商交易、手机支付等等,其拥有密度小、信息容量大、容错能力强、成本低、制作难度低等优点。在移动开发中,二维码的地位也越来越重要,掌握二维码的基本操作是重要的本领之一。

在iOS7之后,苹果自身集成了二维码的生成和读取功能。生成二维码包括以下步骤

  • 导入CoreImage/CoreImage.h头文件
  • 使用CIFilter滤镜类生成二维码
  • 对生成的二维码进行加工,使其更清晰

除了上述三个步骤之外,我们还可以对二维码进行进一步的拓展处理

  • 自定义二维码图案颜色
  • 在二维码中心插入圆角小图片
  • 在圆角图片下面加上一层圆角白色图片

二维码生成

码农们生产代码的同时永远不要忘记尽可能的复用,那么为了实现这种目的,本文的代码通过类别拓展UIImage的方法来完成。我们先声明并实现一个类方法用来接收二维码存储数据以及二维码尺寸的方法:

+ (UIImage *)imageOfQRFromURL: (NSString *)networkAddress codeSize: (CGFloat)codeSize {
  if (!networkAddress|| (NSNull *)networkAddress == [NSNull null]) {
    return nil;
  }
  codeSize = [self validateCodeSize: codeSize];
  CIImage * originImage = [self createQRFromAddress: networkAddress];
  UIImage * result = [UIImage imageWithCIImage: originImage];
  return result;
}

在上面的代码里面,我们总共做了四件事情:验证存储信息的有效性;验证二维码尺寸的合理大小;使用存储信息生成二维码;将二维码转成UIImage返回。这些方法的实现分别如下:

/*! 验证二维码尺寸合法性*/
+ (CGFloat)validateCodeSize: (CGFloat)codeSize
{
  codeSize = MAX(160, codeSize);
  codeSize = MIN(CGRectGetWidth([UIScreen mainScreen].bounds) - 80, codeSize);
  return codeSize;
}

/*! 利用系统滤镜生成二维码图*/
+ (CIImage *)createQRFromAddress: (NSString *)networkAddress
{
  NSData * stringData = [networkAddress dataUsingEncoding: NSUTF8StringEncoding];
  CIFilter * qrFilter = [CIFilter filterWithName: @"CIQRCodeGenerator"];
  [qrFilter setValue: stringData forKey: @"inputMessage"];
  [qrFilter setValue: @"H" forKey: @"inputCorrectionLevel"];
  return qrFilter.outputImage;
}

/! 验证二维码尺寸合法性/
- (CGFloat)validateCodeSize: (CGFloat)codeSize
{
  codeSize = MAX(160, codeSize);
  codeSize = MIN(CGRectGetWidth([UIScreen mainScreen].bounds) - 80, codeSize);
  return codeSize;
}

/! 利用系统滤镜生成二维码图/
- (CIImage *)createQRFromAddress: (NSString *)networkAddress
{
  NSData * stringData = [networkAddress dataUsingEncoding: NSUTF8StringEncoding];
  CIFilter * qrFilter = [CIFilter filterWithName: @"CIQRCodeGenerator"];
  [qrFilter setValue: stringData forKey: @"inputMessage"];
  [qrFilter setValue: @"H" forKey: @"inputCorrectionLevel"];
  return qrFilter.outputImage;
}

ps:对于CIFilter想要更进一步了解,可以在xcode中使用快捷键shift+command+0打开文档,然后搜索core image filter reference获取更多滤镜的使用方法,这些滤镜可以用来实现类似美图秀秀的修图功能。

上面的代码生成了一个粗略的二维码图,我们需要对图片再进行一次处理,使其清晰化。因为,我们需要另外一个类别方法:

/! 对图像进行清晰化处理/
- (UIImage *)excludeFuzzyImageFromCIImage: (CIImage *)image size: (CGFloat)size
{
  CGRect extent = CGRectIntegral(image.extent);
  CGFloat scale = MIN(size / CGRectGetWidth(extent), size / CGRectGetHeight(extent));
  size_t width = CGRectGetWidth(extent) * scale;
  size_t height = CGRectGetHeight(extent) * scale;

  //创建灰度色调空间
  CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceGray();
  CGContextRef bitmapRef = CGBitmapContextCreate(nil, width, height, 8, 0, colorSpace, (CGBitmapInfo)kCGImageAlphaNone);
  CIContext * context = [CIContext contextWithOptions: nil];
  CGImageRef bitmapImage = [context createCGImage: image fromRect: extent];
  CGContextSetInterpolationQuality(bitmapRef, kCGInterpolationNone);
  CGContextScaleCTM(bitmapRef, scale, scale);
  CGContextDrawImage(bitmapRef, extent, bitmapImage);

  CGImageRef scaledImage = CGBitmapContextCreateImage(bitmapRef);
  CGContextRelease(bitmapRef);
  CGImageRelease(bitmapImage);
  CGColorSpaceRelease(colorSpace);
  return [UIImage imageWithCGImage: scaledImage];
}

那么这时候,我们把+(UIImage *)imageOfQRFromURL: codeSize:的最后改成

UIImage * result =[self excludeFuzzyImageFromCIImage: originImage size: codeSize];

示例完成后生成的二维码效果图如下:

二维码拓展

单一的黑白色二维码并不一定总能满足开发的需求或者说领导的需求。好比现在的应用很多功能界面上都在朝着微信学习,这就包括了更多色彩,更多样式的二维码。本文将从颜色、二维码中心小图案这两点入手讲解如何制作类似微信生成我的二维码的样式。

自定义二维码颜色的实现思路是,遍历生成的二维码的像素点,将其中为白色的像素点填充为透明色,非白色则填充为我们自定义的颜色。但是,这里的白色并不单单指纯白色,rgb值高于一定数值的灰色我们也可以视作白色处理。在这里我对白色的定义为rgb值高于0xd0d0d0的颜色值为白色,这个值并不是确定的,大家可以自己设置。基于颜色的设置,我们将原有生成二维码的方法接口改成这样:

+ (UIImage *)imageOfQRFromURL: (NSString *)networkAddress codeSize: (CGFloat)codeSize red: (NSUInteger)red green: (NSUInteger)green blue: (NSUInteger)blue
{
  if (!networkAddress || (NSNull *)networkAddress == [NSNull null]) { return nil; }
  /** 颜色不可以太接近白色*/
  NSUInteger rgb = (red << 16) + (green << 8) + blue;
  NSAssert((rgb & 0xffffff00) <= 0xd0d0d000, @"The color of QR code is two close to white color than it will diffculty to scan");

  codeSize = [self validateCodeSize: codeSize];
  CIImage * originImage = [self createQRFromAddress: networkAddress];
  UIImage * progressImage = [self excludeFuzzyImageFromCIImage: originImage size: codeSize];   //到了这里二维码已经可以进行扫描了
  UIImage * effectiveImage = [self imageFillBlackColorAndTransparent: progressImage red: red green: green blue: blue]; //进行颜色渲染后的二维码
  return effectiveImage;
}

相较于前面的代码,多了两个步骤:判断rgb的有效值;对二维码进行颜色渲染。颜色渲染的过程包括获取图像的位图上下文、像素替换、二进制图像转换等操作,具体代码如下:

/*! 对生成二维码图像进行颜色填充*/
+ (UIImage *)imageFillBlackColorAndTransparent: (UIImage *)image red: (NSUInteger)red green: (NSUInteger)green blue: (NSUInteger)blue {

 const int imageWidth = image.size.width;
 const int imageHeight = image.size.height;
 size_t bytesPerRow = imageWidth * 4;
 uint32_t * rgbImageBuf = (uint32_t *)malloc(bytesPerRow * imageHeight);

 CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
 CGContextRef context = CGBitmapContextCreate(rgbImageBuf, imageWidth, imageHeight, 8, bytesPerRow, colorSpace, kCGBitmapByteOrder32Little | kCGImageAlphaNoneSkipLast);
 CGContextDrawImage(context, (CGRect){(CGPointZero), (image.size)}, image.CGImage);

 //遍历像素
 int pixelNumber = imageHeight * imageWidth;
 [self fillWhiteToTransparentOnPixel: rgbImageBuf pixelNum: pixelNumber red: red green: green blue: blue];
 CGDataProviderRef dataProvider = CGDataProviderCreateWithData(NULL, rgbImageBuf, bytesPerRow, ProviderReleaseData);
 CGImageRef imageRef = CGImageCreate(imageWidth, imageHeight, 8, 32, bytesPerRow, colorSpace, kCGImageAlphaLast | kCGBitmapByteOrder32Little, dataProvider, NULL, true, kCGRenderingIntentDefault);

 UIImage * resultImage = [UIImage imageWithCGImage: imageRef];
 CGImageRelease(imageRef);
 CGColorSpaceRelease(colorSpace);
 CGContextRelease(context);
 return resultImage;
}

/! 遍历所有像素点进行颜色替换/
+ (void)fillWhiteToTransparentOnPixel: (uint32_t *)rgbImageBuf pixelNum: (int)pixelNum red: (NSUInteger)red green: (NSUInteger)green blue: (NSUInteger)blue {
uint32_t * pCurPtr = rgbImageBuf;
for (int i = 0; i < pixelNum; i++, pCurPtr++) {
    if ((*pCurPtr & 0xffffff00) < 0xd0d0d000) {
      uint8_t * ptr = (uint8_t *)pCurPtr;
      ptr[3] = red;
      ptr[2] = green;
      ptr[1] = blue;
    } else {
      //将白色变成透明色
      uint8_t * ptr = (uint8_t *)pCurPtr;
      ptr[0] = 0;
    }
  }
}

void ProviderReleaseData(void * info, const void * data, size_t size) {
  free((void *)data);
}

ps:在修改代码之前,应该想清楚是否需要删除原有代码。类似这种二维码的扩展,旧的二维码生成接口可以留下来,然后在其中调用多参数的全能构造器Designated Initializer。

这时候距离微信还差一小步,我们要在二维码的中心位置插入我们的小头像,最直接的方式是加载完我们的头像后,直接drawInRect:这种实现方法是正确的,但是在我们画上去之前,我们还需要对图像进行圆角处理。(省事的可能直接用imageView加载头像,然后设置头像的cornerRadius,这个也能实现效果)。

到了这个时候,我们需要一个更多参数的二维码生成方法接口了,这次新增的参数应该包括插入图片、圆角半径这些参数,因此方法如下:

+ (UIImage *)imageOfQRFromURL: (NSString *)networkAddress codeSize: (CGFloat)codeSize red: (NSUInteger)red green: (NSUInteger)green blue: (NSUInteger)blue insertImage: (UIImage *)insertImage roundRadius: (CGFloat)roundRadius {

  if (!networkAddress || (NSNull *)networkAddress == [NSNull null]) { return nil; }
  /** 颜色不可以太接近白色*/
  NSUInteger rgb = (red << 16) + (green << 8) + blue;
  NSAssert((rgb & 0xffffff00) <= 0xd0d0d000, @"The color of QR code is two close to white color than it will diffculty to scan");
  codeSize = [self validateCodeSize: codeSize];

  CIImage * originImage = [self createQRFromAddress: networkAddress];
  UIImage * progressImage = [self excludeFuzzyImageFromCIImage: originImage size: codeSize];   //到了这里二维码已经可以进行扫描了
  UIImage * effectiveImage = [self imageFillBlackColorAndTransparent: progressImage red: red green: green blue: blue]; //进行颜色渲染后的二维码
  return [self imageInsertedImage: effectiveImage insertImage: insertImage radius: roundRadius];
}

这次的生成方法同样也只需要进行一次额外的调用方法操作,在插入图片的时候我们需要注意,类似微信的图中图二维码中间的小头像是有一个圆角的白色边缘的,这个边缘的加入让头像显示的更加自然。那么要完成这个效果,我额外在项目中加入了一张白色背景的小图,同样对这张图片进行圆角化处理,然后加在头像的下面。作为头像下方的白色背景图像尺寸应该大于头像图。制作画中画效果的具体实现如下:

/! 在二维码原图中心位置插入圆角图像/
+ (UIImage *)imageInsertedImage: (UIImage *)originImage insertImage: (UIImage *)insertImage radius: (CGFloat)radius
{
  if (!insertImage) { return originImage; }
  insertImage = [UIImage imageOfRoundRectWithImage: insertImage size: insertImage.size radius: radius];
  UIImage * whiteBG = [UIImage imageNamed: @"whiteBG"];
  whiteBG = [UIImage imageOfRoundRectWithImage: whiteBG size: whiteBG.size radius: radius];

  //白色边缘宽度
  const CGFloat whiteSize = 2.f;
  CGSize brinkSize = CGSizeMake(originImage.size.width / 4, originImage.size.height / 4);
  CGFloat brinkX = (originImage.size.width - brinkSize.width) * 0.5;
  CGFloat brinkY = (originImage.size.height - brinkSize.height) * 0.5;
  CGSize imageSize = CGSizeMake(brinkSize.width - 2 * whiteSize, brinkSize.height - 2 * whiteSize);

  CGFloat imageX = brinkX + whiteSize;
  CGFloat imageY = brinkY + whiteSize;
  UIGraphicsBeginImageContext(originImage.size);
  [originImage drawInRect: (CGRect){ 0, 0, (originImage.size) }];
  [whiteBG drawInRect: (CGRect){ brinkX, brinkY, (brinkSize) }];
  [insertImage drawInRect: (CGRect){ imageX, imageY, (imageSize) }];

  UIImage * resultImage = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();
  return resultImage;
}

- (UIImage *)imageOfRoundRectWithImage: (UIImage *)image size: (CGSize)size radius: (CGFloat)radius
{
  if (!image) { return nil; }
  const CGFloat width = size.width;
  const CGFloat height = size.height;
  radius = MAX(5.f, radius);
  radius = MIN(10.f, radius);

  UIImage * img = image;
  CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
  CGContextRef context = CGBitmapContextCreate(NULL, width, height, 8, 4 * width, colorSpace, kCGImageAlphaPremultipliedFirst);
  CGRect rect = CGRectMake(0, 0, width, height);

  //绘制圆角
  CGContextBeginPath(context);
  addRoundRectToPath(context, rect, radius, img.CGImage);
  CGImageRef imageMasked = CGBitmapContextCreateImage(context);
  img = [UIImage imageWithCGImage: imageMasked];

  CGContextRelease(context);
  CGColorSpaceRelease(colorSpace);
  CGImageRelease(imageMasked);
  return img;
}

ps:图像绘制圆角是通过在图像上下文中画出圆角矩形的路径,然后进行裁剪,这样就能实现图片的圆角化。

在代码中,对中心位置的头像限制尺寸为二维码的四分之一,这个尺寸下的头像不失清晰度,而且图片尺寸也不至于遮盖了二维码的存储数据。上面的方法都可以在头文件中开发方法接口使用,这将实现这些代码的复用。另外,所有本文中写到的生成二维码的接口都应该在头文件中声明,并且在其实现中调用全能方法(不应当仅仅是构造器需要遵循Designated Initializer的原则):

+ (UIImage *)imageOfQRFromURL: (NSString *)networkAddress
{
  return [self imageOfQRFromURL: networkAddress codeSize: 100.0f red: 0 green: 0 blue: 0 insertImage: nil roundRadius: 0.f];
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

(0)

相关推荐

  • ios原生二维码扫描

    做iOS的二维码扫描,有两个第三方库可以选择,ZBar和ZXing.今天要介绍的是iOS7.0后AVFoundation框架提供的原生二维码扫描. 首先需要添加AVFoundation.framework框架到你工程中build phase的"Link Binary With Libraries"之下,然后就可以开始了. 一.做好准备工作,搭建UI UI效果如图 IBOutlet.IBAction如下: @property (weak, nonatomic) IBOutlet UIVi

  • iOS 条码及二维码扫描(从相册中读取条形码/二维码)及扫码过程中遇到的坑

    文章重点介绍如何解决,从手机相册中读取条形码和二维码的问题 1.扫码. 网上有特别的关于iOS扫码的代码和示例,其中扫码主要使用的是自带的AVFoundation类.这里就不细说了,要注意的是如何设置扫描区域,识别区域(这个值是按比例0~1设置,而且X.Y要调换位置,width.height调换位置) <span style="font-size:14px;">//创建输出流 AVCaptureMetadataOutput * output = [[AVCaptureMet

  • iOS和Android用同一个二维码实现跳转下载链接的方法

    前言 最近一个项目需要iOS和安卓使用一个二维码,让扫描的机器自己识别操作系统实现跳转到相应的下载链接.比如iPhone用微信进行扫描就让他跳转appStore的下载页面,安卓机器使用微信扫描就直接跳浏览器下载.但是这二维码还有一个需求就是,用户已经下载了这个app,当用户打开app进入到注册页面时,再次扫描这个二维码时,自动填写邀请码进行注册.那么该如何实现,细节就不说了,直接上代码. 使用js实现,其实代码非常简单. 使用时直接拷贝代码,改掉相应的链接就好. PS:该链接在微信环境打开时还是

  • 扫描二维码控件的封装iOS实现

    扫描二维码效果 源码:https://github.com/YouXianMing/Animations // // QRCodeView.h // QRCode // // Created by YouXianMing on 16/7/7. // Copyright © 2016年 XianMing You. All rights reserved. // #import <UIKit/UIKit.h> #import <AVFoundation/AVFoundation.h>

  • IOS 创建彩色二维码实例详解

    IOS 创建彩色二维码 因为系统创建的二维码默认都是黑色的,所以突然想改变一下二维码颜色,具体操作有点复杂,而且其中用到了好多C语言的语法,Swift不好写,所以默认用了OC.只贴了.m文件的代码,.h文件就是几个类函数的声明. #import "UIImage+CreateQRCode.h" @implementation UIImage (CreateQRCode) + (UIImage *)createQRCode:(NSString *)string andSize:(CGSi

  • ios swift3.0实现二维码扫描、生成、识别示例代码

    基于swift3.0 1.扫描二维码 设置扫描会话,图层和输入输出 //设置捕捉设备 let device = AVCaptureDevice.defaultDevice(withMediaType: AVMediaTypeVideo) do { //设置设备输入输出 let input = try AVCaptureDeviceInput(device: device) let output = AVCaptureMetadataOutput() output.setMetadataObjec

  • iOS 二维码生成及扫码详解及实例代码

    iOS二维码生成及扫码 现在越来越多的应用加入二维码相关的业务,在iOS开发市场上很多开发人员都在使用第三方的扫码与生成二维码的控件,个人认为此类的第三方控件识别度不高.最近正好整理新框架的事情,研究了一下.具体代码如下 生成二维码代码 /** * @author 半 饱, 15-12-18 * * @brief 生成二维码图片 * * @param code 生成二维码图片内容 * @param width 二维码图片宽度 * @param height 二维码图片高度 * * @return

  • 如何在iphon IOS设备上使用二维码

    下面给大家介绍下二维码简介 二维码 (2-dimensional bar code) 是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的:在代码编制上巧妙地利用构成计算机内部逻辑基础的"0"."1"比特流的概念,使用若干个与二进制相对应的几何形体来表示文字数值信息,通过图象输入设备或光电扫描设备自动识读以实现信息自动处理: 二维条码/二维码能够在横向和纵向两个方位同时表达信息,因此能在很小的面积内表达大量的信息. 下面介绍下如

  • IOS笔记061之二维码的生成和扫描

    如今二维码随处可见,无论是实物商品还是各种礼券都少不了二维码的身影.而手机等移动设备又成为二维码的一个很好的应用平台,不管是生成二维码还是扫码二维码.本篇文章从生成二维码.扫描二维码展开分析,通过内容分析二维码用起来也很easy了. 首先说下生成二维码 二维码可以存放纯文本.名片或者URL 其次生成二维码的步骤: 导入CoreImage框架 再次通过滤镜CIFilter生成二维码 1.创建过滤器 2.恢复滤镜的默认属性 3.设置内容 4.获取输出文件 5.显示二维码 代码实现 CoreImage

  • IOS生成与读取二维码名片

    一.概述 1.通过某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的 2.二维码通常可以包含以下内容 纯文本 名片 URL 3.二维码具有非常广泛的应用 二维码名片 扫码付款 网址(URL),扫描后自动打开网址 二.二维码的生成 1.生成原理 通过一个类CIFilter(滤镜)包含二维码中所有的信息,然后生成一张二维码图片 二维码中间的icon(头像),是通过在生成的图片上添加一张图片实现的 2.生成步骤 创建滤镜 初始化滤镜 添加二维码信息 获取生成的二维码

随机推荐