当前位置: 首页 > 编程笔记 >

iOS 定制多样式二维码

文华美
2023-03-14
本文向大家介绍iOS 定制多样式二维码,包括了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];
}

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

 类似资料:
  • 本文向大家介绍iOS模仿微信长按识别二维码的多种方式,包括了iOS模仿微信长按识别二维码的多种方式的使用技巧和注意事项,需要的朋友参考一下  参考:https://github.com/nglszs/BCQRcode 方式一: 方式二:识别网页中的二维码 iOS WebView中 长按二维码的识别 思路: 长按webView 的过程中 截屏,再去解析是否有二维码,但是有个缺点 就是 万一截了一个

  • 问题内容: 在单独的CSS文件中维护IE解决方法的常用做法是什么? 我说的是更深层次的问题,这些问题是无法通过其他方法解决的(例如,包括备用图像url和base64编码的嵌入式资源; boxsizing.htc解决方法等。) 注意:考虑到dataURI与香草味,所以只有少数 有时我不得不诉诸类似于 编码的图像字符串平均为100〜300个字符。给定上面的代码,这将导致一些冗余通信- 兼容的浏览器将下

  • 本文向大家介绍ios原生二维码扫描,包括了ios原生二维码扫描的使用技巧和注意事项,需要的朋友参考一下 做iOS的二维码扫描,有两个第三方库可以选择,ZBar和ZXing。今天要介绍的是iOS7.0后AVFoundation框架提供的原生二维码扫描。 首先需要添加AVFoundation.framework框架到你工程中build phase的"Link Binary With Libraries

  • 本文向大家介绍iOS如何扫描HEIF格式的二维码图片,包括了iOS如何扫描HEIF格式的二维码图片的使用技巧和注意事项,需要的朋友参考一下 一、说在前面 iPhone 7 之后系统相机支持HEIF格式的图片,在扫描二维码时,该格式的图片需要转换成JPG格式才能进行扫描成功。 二、思路 用户在打开系统相册选择完一张照片后,要判断该照片是否是HEIF格式,如果是,进行格式转换之后再扫描JPG图片的内容

  • 本文向大家介绍iOS使用CIFilter生成二维码,包括了iOS使用CIFilter生成二维码的使用技巧和注意事项,需要的朋友参考一下 二维码(Quick Response Code,简称QR Code)是由水平和垂直两个方向上的线条设计而成的一种二维条形码(barcode)。可以编码网址、电话号码、文本等内容,能够存储大量的数据信息。自iOS 7以来,二维码的生成和读取只需要使用Core Ima

  • 本文向大家介绍iOS二维码的生成代码,包括了iOS二维码的生成代码的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了iOS二维码的生成代码,供大家参考,具体内容如下 一、工程图。   二、代码。 ViewController.m 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。