有赞零售小票打印图片二值化方案

有赞零售小票打印跨平台解决方案

 

作者：王前、林昊（鱼干）

一、背景

零售商家的日常经营中，小票打印的场景无处不在，顾客的每笔消费都会收到商家打印出的消费小票，这个是顾客的消费凭证，所以小票的内容对顾客和商家都尤为重要。对于有赞零售应用软件来说，小票打印功能也是必不可少的，诸多业务场景都需要提供相应的小票打印能力。

• 打印需求端

• 小票业务场景

• 小票打印机设备类型

过去我们存在的痛点：

1. 每个端各自实现一套打印流程，方案不统一。导致每次修改都会三端修改，而且 iOS 和 Android 必须依赖发版才可上线，不具有动态性，而且研发效率比较低。
2. 打印小票的业务场景比较多，每个业务都自己实现模板封装及打印逻辑，模板及逻辑不统一，维护成本大。
3. 多种小票设备的适配，对于每个端来说都要适配一遍。

其中最主要的痛点还是在于第一点，多端的不统一问题。由于不统一，导致开发和维护的成本成倍级增长。

针对以上痛点，小票打印技术方案需要解决的三个主要问题：

1. iOS 、安卓和网页端的零售软件都需要提供小票样式设置和打印的能力，如何降低小票打印代码的维护和更新成本。
2. 如何定制显示不同业务场景的小票内容：不同业务场景下的小票信息都不尽相同，比如购物小票和退款小票，商品信息的样式是一样的，但是支付信息是不一样的，购物小票应当显示顾客的支付信息，退款小票显示商家退款信息。
3. 如何更灵活的适配多种多样的小票打印机，从连接方式上分为蓝牙连接和 WIFI 连接，从纸张样式分为 80mm 和 58mm 两种宽度。

二、整体解决方案

针对以上三个问题，我们提出了一个涉及前端、移动端和服务端的跨平台解决方案，

• 架构图

架构设计的核心在于通过 JS 实现支持跨平台的小票解析脚本，并具有动态更新的优势；通过服务端下发可编辑的样式模板实现小票内容的灵活定制；客户端启动 JS 执行器执行 JS 小票脚本引擎（以下简称：JS 引擎）并负责打印机设备的连接管理。

1 、JS 引擎设计

JS 引擎主要能力就是处理小票模版和业务数据，将业务数据整合到模版中（处理不了的交给移动端处理，比如图片），然后将整合模版数据转换成打印指令返给移动端。

• 整体处理流程图

• 结构设计
  
  • 小票格式中，打印机是一行一行的输出。那么基本输出布局单位，我们定义为 layout
  • 默认一行有一个内容块，即一个 layout 里面有一个 content object
  • 当一行有多列内容的时候，即一个 layout 里面包含 N 个 content object 。 各自内容块有 pagerWeight 代表每个内容的宽度占比
  • 每一行的后面的是一个占位符，用数据模型的 key 做占位

小票 layout 样式描述：

content block 内容块： 

不同类型内容所支持的能力：

• 模版编译

这里使用了 HandleBars.js 作为模板编译的库。此外，目前还额外提供了部分能力支持。

自定义能力：

• 打印机设备适配

主要进行适配指令集解析适配，根据连接不同设备进行不同指令解析。目前已适配设备：365wifi 、 sunmi 、 sprt80 、 sprt58 、 wangpos 、 aclas 、 xprinter 。如果连接未适配的设备抛出找不到相应打印机解析器 error。

• 调用对应打印机的 parser 指令解析流程

• 兼容性问题

  • 切纸：支持外部传入是否需要切纸，防止外部发送打印指令时加入切纸指令后重复切纸问题，默认加切纸指令。
  • 一机多尺寸打印：存在一台打印机支持两种纸张打印（ 80mm 、 58mm ），这时需要从外部传入打印尺寸，默认 80mm 。比如，sunmiT1 支持 80mm 和 58mm 打印，默认是 80mm 。

• 容错处理

  • 由于模版解析有一定格式要求，所以一些特殊字符及转移字符存在数据中会存在解析错误。所以 JS 在传入数据时，做了一层过滤，将 "\" 、 " " 、 "" ... 等字符去掉或替换，保证打印。
  • 如果在解析过程中存在错误，将抛出异常给移动端捕获。

2 、模板管理服务

小票模板的动态编辑和下发，模版动态配置信息存储和各业务全量模版存储，提供移动端动态配置信息接口，拉取业务小票模版接口，各业务方业务数据接口。

• 整体处理流程图

• 小票基础模版库存储示例

  

  shopId：店铺 ID

  business：业务方

  type：打印内容类型

  content：layout 中 content 内容

  sortWeight：排序比重，用于输出模板 layout 顺序

• 动态设置数据存储示例

  

  shopId：店铺 ID

  business：业务方

  type：打印内容类型

  params：需要替换填充的内容

• 接口返回整合后的小票模版 json

{
    "business": "shopping",
    "shopId": 111111,
    "id": 321,
    "version": 0,
    "layouts": [{
                "name": "LOGO",
                "content": "[{"content":"http://www.test.com/test.jpg","contentType":"image","textAlign":"center","width":45}]"
                },{
                "name": "电话",
                "content": "[{"content":"电话：{{mobile}}","contentType":"text","textAlign":"left","fontSize":"default","pagerWeight":1}]"
                },...]
}

12345678910111213

其中相关动态数据后端已经做过整合替换，需要替换的业务数据保留在模板 json 中，等获取业务数据后由 JS 引擎进行替换。 上面 json 中 http://www.test.com/test.jpg 就是动态整合替换数据，{{mobile}} 是一个需要替换的业务数据。

3 、移动端

移动端除了动态模版配置之外，主要的就是打印流程。移动端只需要关心需要打印什么业务小票，然后去后端拉取业务小票模版和业务数据，将拉取到的数据传给 JS 引擎进行预处理，返回模版中处理不了的图片 url 信息，然后移动端进行下载图片，进行二值转换，输出像素的 16 进制字符串，替换原来模版中的 url ，最后将连接的打印机类型和处理后的模版传给 JS 引擎进行打印指令转换返回给打印机打印。

• 动态模版配置

动态配置小票内容，支持 LOGO 、店铺数据、营销活动配置等。左侧为在 80mm 和 58mm 上预览样式。通过动态配置模版，实现后端接口模版更新，然后可以实时同步修改打印内容。网页零售软件上动态配置内容和移动端一样。

• 打印业务流程

该业务流程，移动端完全脱离数据，只需要做一些额外能力以及传输功能，有效解决了业务数据修改依赖移动端发版的问题。 Android 和 iOS 流程统一。

三、移动端功能设计

1 、动态化

动态化在本解决方案里是必不可少的一环，实时更新业务数据模板依赖于后端，但是 JS 解析引擎的下发要依靠移动端来实现，为了及时修复发现的 JS 问题或者快速适配新设备等功能。更新流程图如下：

这里说明一下，因为可能会出现执行 JS 的过程中，正在执行本地 JS 文件更新，导致执行 JS 出错。所以在完成本地更新后会发送一个通知，告知业务方 JS 已更新完成，这时业务方可根据自身需求做逻辑处理，比如重新加载 JS 进行处理业务。

2 、JS 执行器

iOS 使用 JavaScriptCore 框架，Android 使用 J2V8 框架，具体框架的介绍这里就不说明了。JS 执行器设计包含加载指定 JS 文件，调用 JS 方法，获取 JS 属性，JS 异常捕获。

    /**
     初始化 JSExecutor

     @param fileName JS 文件名
     @return JSExecutor
     */
    - (instancetype)initWithScriptFile:(NSString *)fileName;

    /**
     加载 JS 文件

     @param fileName JS 文件名
     */
    - (void)loadSriptFile:(NSString *)fileName;

    /**
     执行 JS 方法

     @param functionName 方法名
     @param args 入参
     @return 方法返回值
     */
    - (JSValue *)runJSFunction:(NSString *)functionName args:(NSArray *)args;

    /**
     获取 JS 属性

     @param propertyName 属性名
     @return 属性值
     */
    - (JSValue *)getJSProperty:(NSString *)propertyName;

    /**
     JS 异常捕获

     @param handler 异常捕获回调
     */
    - (void)catchExceptionWithHandler:(JSExceptionHandler)handler;

1234567891011121314151617181920212223242526272829303132333435363738

加载 JS 文件方法，可以加载动态下发的 JS 。逻辑是先判断本地下发的文件是否存在，如果存在就加载下发 JS ，否则加载 app 中 bundle 里面的 JS 文件。

    - (void)loadSriptFile:(NSString *)fileName{
        NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
        if (paths.count > 0) {
            NSString *docDir = [paths objectAtIndex:0];
            NSString *docSourcePath = [docDir stringByAppendingPathComponent:[NSString stringWithFormat:@"%@.js", fileName]];
            NSFileManager *fm = [NSFileManager defaultManager];
            if ([fm fileExistsAtPath:docSourcePath]) {
                NSString *jsString = [NSString stringWithContentsOfFile:docSourcePath encoding:NSUTF8StringEncoding error:nil];
                [self.content evaluateScript:jsString];
                return;
            }
        }
        NSString *sourcePath = [[YZCommonBundle bundle] pathForResource:fileName ofType:@"js"];
        NSAssert(sourcePath, @"can't find jscript file");
        NSString *jsString = [NSString stringWithContentsOfFile:sourcePath encoding:NSUTF8StringEncoding error:nil];
        [self.content evaluateScript:jsString];
    }

1234567891011121314151617

这时候可能会有人疑问，为什么这里是直接强制加载本地下发 JS ，而不是对比版本优先加载。这里主要有两点原因：

• 动态下发 JS 文件，就是为了补丁或者优化更新，所以一般新版本下发配置不会存在
• 为了支持 JS 版本回滚

JS 异常捕获功能，将异常抛出给业务方，可以让调用者各自实现逻辑处理。

3 、缓存优化

由于模板和数据都在后端，需要拉取两次接口进行打印，所以需要提供一套缓存机制来提高打印体验。由于业务数据需要实时拉取，所以必须走接口，模板相对于业务数据来说，可以允许一定的延迟。所以，模板采用本地文件缓存，业务数据采用和业务打印页面挂钩的内存缓存，业务数据只需要第一次打印是请求接口，重新打印直接使用。

流程图：

本缓方案存会存在偶现的模板不同步问题，在即将打印时，如果网页后台修改了模板，就会出现本次打印模板不是最新的，但是在下一次打印时就会是最新的了。由于出现的几率比较低，模板也允许有一点延迟，所以不会影响整体流程。

对于离线场景，我们在 app 中存放一个最小可用模板，专门用于离线下小票打印使用。为什么是最小可用模板，因为离线下，业务数据及一些其他数据有可能不全，所以最小可用模板可以保证打印出来的数据准确性。

4 、图片处理

由于 JS 引擎是不能解析图片文件的，所以在最初模板中存在图片链接时，全部由移动端进行处理，然后进行替换。图片处理主要就是下载图片，图片压缩，二值图处理，图片像素点压缩（打印指令要求），每个字节转换成 16 进制，拼接 16 进制字符串。

• 下载图片

采用 SDWebImage 进行下载缓存，创建并行队列进行多图片下载，每下载成功一张后回到主线程进行后续的相关处理。所有图片都处理完成或，回调给 JS 引擎进行指令解析。

• 图片压缩

根据 JS 引擎模板要求的 width（必须是 8 的倍数，后续说明），进行等比例压缩，转换成 jpg 格式，过滤掉 alpha 通道。

• 二值图处理

遍历每一个像素点，进行 RGB 取值，然后算出 RGB 均值与 255 的比值，根据比值进行取值 0 或 255 。这里没有使用直方图寻找阈值 T 的方式进行处理，是出于性能和时间考虑。

• 像素点压缩

由于打印机指令要求，需要对转换成二值后的每个点进行 width 上压缩，需要将 8 个字节压缩到 1 个字节，这里也是为什么图片压缩时 width 必须是 8 的倍数的原因，否则打印出来的图片会错位。

• 16 进制字符串

因为打印机打印图片接收的是 16 进制字符串，所以需要将处理后的每个字节转换成 16 进制字符，然后拼成一个字符串。

5 、实现多次打印

由于业务场景需要，需要自动打印多张小票，所以设计了多次打印逻辑。由于每次打印都是异步线程中，所以不可以直接循环打印，这里使用信号量 dispatch_semaphore_t ，在异步线程中创建和 wait 信号量，每次打印完成回调线程中 signal 信号量，实现多次打印，保证每次打印依次进行。如果中途打印出错，则终止后续打印。

    dispatch_async(dispatch_get_global_queue(0, 0), ^{
        dispatch_semaphore_t semaphore = dispatch_semaphore_create(0);
        for (int i = 1; i <= printCount; i++) {
            if (stop) {
                break;
            }
            [self print:template andCompletionBlock:^(State state, NSString *errorStr) {
                dispatch_async(dispatch_get_main_queue(), ^{
                    if (errorStr.length > 0 || i == printCount) {
                        if (completion) {
                            completion(state, errorStr);
                        }
                        stop = YES;
                    }
                    dispatch_semaphore_signal(semaphore);
                });
            }];
            dispatch_semaphore_wait(semaphore, dispatch_time(DISPATCH_TIME_NOW, 15*NSEC_PER_SEC));
        }
    });

1234567891011121314151617181920

四、总结与展望

本方案已经实施，在零售 app 中使用来看，已经满足目前大部分业务场景及需求，后续的开发及维护成本也会大幅度降低，提高了研发效率，接入新业务小票也比较方便。客户使用上来说，使用体验和以前没有较大差别，同时在处理客户反映的问题来说，也可以做到快速修改，实时下发等。不过目前还存在一些不足点，比如说图片打印的功能，还不能完全满足所有图片都做到完美打印，毕竟图片处理考虑到性能体验方面；还有模板后续可以增加版本号，这样在模板存在异常时也可以回滚或兼容处理等；再者就是缓存优化可以后续进一步优化体验，比如加入模板推送，本地缓存优化等。

参考链接

• HandleBars, by wycats
• date-fns, by date-fns
• lodash, by Lodash
• JavaScriptCore, by Apple
• J2V8, by eclipsesource

一、背景

小票打印是零售商家的基础功能，在小票信息中，必然会存在一些相关店铺的信息。比如，logo 、店铺二维码等。对于商家来说，上传 logo 及店铺二维码时，基本都是彩图，但是小票打印机基本都是只支持黑白二值图打印。为了商家的服务体验，我们没有对商家上传的图片进行要求，商家可以根据实际情况上传自己的个性化图片，因此就需要我们对商家的图片进行二值图处理后进行打印。

这次文章是对《有赞零售小票打印跨平台解决方案》中的图片的二值图处理部分的解决方案的说明。

二、图像二值化处理流程

图像二值化就是将图像上的像素点的灰度值（如果是 RGB 彩图，则需要先将像素点的 RGB 转成灰度值）设置为 0 或 255 ，也就是将整个图像呈现出明显的黑白效果的过程。

其中划分 0 和 255 的中间阈值 T 是二值化的核心，一个准确的阈值可以得到一个较好的二值图。

 

二值化整体流程图：

从上面的流程图中可以看出，获取灰度图和计算阈值 T 是二值化的核心步骤。

三、以前的解决方案

以前使用的方案是，首先将图像处理成灰度图，然后再基于 OTSU（大津法、最大类间方差法）算法求出分割 0 和 255 的阈值 T ，然后根据 T 对灰度值进行二值化处理，得到二值图像。

我们的所有算法都有使用 C 语言实现，目的为了跨平台通用性。

流程图：

灰度算法：

对于 RGB 彩色转灰度，有一个很著名的公式：

Gray = R * 0.299 + G * 0.587 + B * 0.114

这种算法叫做 Luminosity，也就是亮度算法。目前这种算法是最常用的，里面的三个数据都是经验值或者说是实验值。由来请参见 wiki 。

然而实际应用时，大家都希望避免低速的浮点运算，为了提高效率将上述公式变形成整数运算和移位运算。这里将采用移位运算公式：

Gray = (R * 38 + G * 75 + B * 15) >> 7

如果想了解具体由来，可以自行了解，这里不做过多解释。

具体实现算法如下：

/**
 获取灰度图

 @param bit_map 图像像素数组地址（ ARGB 格式）
 @param width 图像宽
 @param height 图像高
 @return 灰度图像素数组地址
 */
int * gray_image(int *bit_map, int width, int height) {  
    double pixel_total = width * height; // 像素总数
    if (pixel_total == 0) return NULL;
    // 灰度像素点存储
    int *gray_pixels = (int *)malloc(pixel_total * sizeof(int));
    memset(gray_pixels, 0, pixel_total * sizeof(int));
    int *p = bit_map;
    for (u_int i = 0; i < pixel_total; i++, p++) {
        // 分离三原色及透明度
        u_char alpha = ((*p & 0xFF000000) >> 24);
        u_char red = ((*p & 0xFF0000) >> 16);
        u_char green = ((*p & 0x00FF00) >> 8);
        u_char blue = (*p & 0x0000FF);

        u_char gray = (red*38 + green*75 + blue*15) >> 7;
        if (alpha == 0 && gray == 0) {
            gray = 0xFF;
        }
        gray_pixels[i] = gray;
    }
    return gray_pixels;
}

该算法中，主要是为了统一各平台的兼容性，入参要求传入 ARGB 格式的 bitmap 。为什么使用 int 而不是用 unsigned int，是因为在 java 中没有无符号数据类型，使用 int 具有通用性。

OTSU 算法：

OTSU 算法也称最大类间差法，有时也称之为大津算法，由大津于 1979 年提出，被认为是图像分割中阈值选取的最佳算法，计算简单，不受图像亮度和对比度的影响，因此在数字图像处理上得到了广泛的应用。它是按图像的灰度特性，将图像分成背景和前景两部分。因方差是灰度分布均匀性的一种度量，背景和前景之间的类间方差越大，说明构成图像的两部分的差别越大，当部分前景错分为背景或部分背景错分为前景都会导致两部分差别变小。因此，使类间方差最大的分割意味着错分概率最小。

原理：

对于图像 I ( x , y ) ，前景（即目标）和背景的分割阈值记作 T ，属于前景的像素点数占整幅图像的比例记为 ω0 ，其平均灰度 μ0 ；背景像素点数占整幅图像的比例为 ω1 ，其平均灰度为 μ1 。图像的总平均灰度记为 μ ，类间方差记为 g 。

假设图像的背景较暗，并且图像的大小为 M × N ，图像中像素的灰度值小于阈值 T 的像素个数记作 N0 ，像素灰度大于等于阈值 T 的像素个数记作 N1 ，则有：

ω0 = N0 / M × N                         (1)
ω1 = N1 / M × N                         (2)
N0 + N1 = M × N                         (3)
ω0 + ω1 = 1                             (4)
μ = ω0 * μ0 + ω1 * μ1                   (5)
g = ω0 * (μ0 - μ)^2 + ω1 * (μ1 - μ)^2   (6)

将式 (5) 代入式 (6) ，得到等价公式：

g = ω0 * ω1 * (μ0 - μ1)^2 　　        (7)

公式 (7) 就是类间方差计算公式，采用遍历的方法得到使类间方差 g 最大的阈值 T ，即为所求。

因为 OTSU 算法求阈值的基础是灰度直方图数据，所以使用 OTSU 算法的前两步：

1、获取原图像的灰度图

2、灰度直方统计

这里需要多次对图像进行遍历处理，如果每一步都单独处理，会增加不少遍历次数，所以这里做了步骤整合处理，减少不必要的遍历，提高性能。

具体实现算法如下：

/**
 OTSU 算法获取二值图

 @param bit_map 图像像素数组地址（ ARGB 格式）
 @param width 图像宽
 @param height 图像高
 @param T 存储计算得出的阈值
 @return 二值图像素数组地址
 */
int * binary_image_with_otsu_threshold_alg(int *bit_map, int width, int height, int *T) {

    double pixel_total = width * height; // 像素总数
    if (pixel_total == 0) return NULL;

    unsigned long sum1 = 0;  // 总灰度值
    unsigned long sumB = 0;  // 背景总灰度值
    double wB = 0.0;        // 背景像素点比例
    double wF = 0.0;        // 前景像素点比例
    double mB = 0.0;        // 背景平均灰度值
    double mF = 0.0;        // 前景平均灰度值
    double max_g = 0.0;     // 最大类间方差
    double g = 0.0;         // 类间方差
    u_char threshold = 0;    // 阈值
    double histogram[256] = {0}; // 灰度直方图，下标是灰度值，保存内容是灰度值对应的像素点总数

    // 获取灰度直方图和总灰度
    int *gray_pixels = (int *)malloc(pixel_total * sizeof(int));
    memset(gray_pixels, 0, pixel_total * sizeof(int));
    int *p = bit_map;
    for (u_int i = 0; i < pixel_total; i++, p++) {
        // 分离三原色及透明度
        u_char alpha = ((*p & 0xFF000000) >> 24);
        u_char red = ((*p & 0xFF0000) >> 16);
        u_char green = ((*p & 0x00FF00) >> 8);
        u_char blue = (*p & 0x0000FF);

        u_char gray = (red*38 + green*75 + blue*15) >> 7;
        if (alpha == 0 && gray == 0) {
            gray = 0xFF;
        }
        gray_pixels[i] = gray;

        // 计算灰度直方图分布，Histogram 数组下标是灰度值，保存内容是灰度值对应像素点数
        histogram[gray]++;
        sum1 += gray;
    }

    // OTSU 算法
    for (u_int i = 0; i < 256; i++)
    {
        wB = wB + histogram[i]; // 这里不算比例，减少运算，不会影响求 T
        wF = pixel_total - wB;
        if (wB == 0 || wF == 0)
        {
            continue;
        }
        sumB = sumB + i * histogram[i];
        mB = sumB / wB;
        mF = (sum1 - sumB) / wF;
        g = wB * wF * (mB - mF) * (mB - mF);
        if (g >= max_g)
        {
            threshold = i;
            max_g = g;
        }
    }

    for (u_int i = 0; i < pixel_total; i++) {
        gray_pixels[i] = gray_pixels[i] <= threshold ? 0xFF000000:0xFFFFFFFF;
    }

    if (T) {
        *T = threshold;    // OTSU 算法阈值
    }

    return gray_pixels;
}

测试执行时间数据：

iPhone 6: imageSize：260, 260； OTSU 使用时间：0.005254； 5次异步处理使用时间：0.029240

iPhone 6: imageSize：620, 284； OTSU 使用时间：0.029476； 5次异步处理使用时间：0.050313

iPhone 6: imageSize：2560,1440； OTSU 使用时间：0.200595； 5次异步处理使用时间：0.684509

经过测试，该算法处理时间都是毫秒级别的，而且一般我们的图片大小都不大，所以性能没问题。

处理后的效果：

经过 OTSU 算法处理过的二值图基本可以满足大部分商家 logo 。

 

不过对于实际场景来说还有些不足，比如商家的 logo 颜色差别比较大的时候，可能打印出来的图片会和商家意愿的不太一致。比如如下 logo ：

 

上面 logo 对于算法来说，黄色的灰度值比阈值小，所以二值化变成了白色，但是对于商家来说，logo 上红色框内信息缺失了一部分，可能不能满足商家需求。

• 存在问题总结
  • 算法单一，对于不同图片处理结果可能与预期不一致
  • 每次打印都对图片进行处理，没有缓存机制

四、新的解决方案

针对以前使用的方案中存在的两个问题，新的方案中加入了具体优化。

4.1 问题一 （算法单一，对于不同图片处理结果可能与预期不一致）

加入多算法求阈值 T ，然后根据每个算法得出的二值图和原图的灰度图进行对比，相识度比较高的作为最优阈值 T 。

流程图：

 

整个流程当中会并行三个算法进行二值图处理，同时获取二值图的图片指纹 hashCode ，与原图图片指纹 hashCode 进行对比，获取与原图最为相近的二值图作为最优二值图。

其中的OTSU算法上面已经说明，这次针对平均灰度算法和双峰平均值算法进行解析。

平均灰度算法：

平均灰度算法其实很简单，就是将图片灰度处理后，求一下灰度图的平均灰度。假设总灰度为 sum ，总像素点为 pixel_total ，则阈值 T ：

T = sum / pixel_total

具体实现算法如下：

/**
 平均灰度算法获取二值图

 @param bit_map 图像像素数组地址（ ARGB 格式）
 @param width 图像宽
 @param height 图像高
 @param T 存储计算得出的阈值
 @return 二值图像素数组地址
 */
int * binary_image_with_average_gray_threshold_alg(int *bit_map, int width, int height, int *T) {

    double pixel_total = width * height; // 像素总数
    if (pixel_total == 0) return NULL;

    unsigned long sum = 0;  // 总灰度
    u_char threshold = 0;    // 阈值


    int *gray_pixels = (int *)malloc(pixel_total * sizeof(int));
    memset(gray_pixels, 0, pixel_total * sizeof(int));
    int *p = bit_map;
    for (u_int i = 0; i < pixel_total; i++, p++) {
        // 分离三原色及透明度
        u_char alpha = ((*p & 0xFF000000) >> 24);
        u_char red = ((*p & 0xFF0000) >> 16);
        u_char green = ((*p & 0x00FF00) >> 8);
        u_char blue = (*p & 0x0000FF);

        u_char gray = (red*38 + green*75 + blue*15) >> 7;
        if (alpha == 0 && gray == 0) {
            gray = 0xFF;
        }
        gray_pixels[i] = gray;
        sum += gray;
    }
    // 计算平均灰度
    threshold = sum / pixel_total;

    for (u_int i = 0; i < pixel_total; i++) {
        gray_pixels[i] = gray_pixels[i] <= threshold ? 0xFF000000:0xFFFFFFFF;
    }

    if (T) {
        *T = threshold;
    }

    return gray_pixels;
}

双峰平均值算法：

此方法实用于具有明显双峰直方图的图像，其寻找双峰的谷底作为阈值，但是该方法不一定能获得阈值，对于那些具有平坦的直方图或单峰图像，该方法不合适。该函数的实现是一个迭代的过程，每次处理前对直方图数据进行判断，看其是否已经是一个双峰的直方图，如果不是，则对直方图数据进行半径为 1（窗口大小为 3 ）的平滑，如果迭代了一定的数量比如 1000 次后仍未获得一个双峰的直方图，则函数执行失败，如成功获得，则最终阈值取双峰的平均值作为阈值。因此实现该算法应有的步骤：

1、获取原图像的灰度图

2、灰度直方统计

3、平滑直方图

4、求双峰平均值作为阈值 T

其中第三步平滑直方图的过程是一个迭代过程，具体流程图：

 

具体实现算法如下：

// 判断是否是双峰直方图
int is_double_peak(double *histogram) {  
    // 判断直方图是存在双峰
    int peak_count = 0;
    for (int i = 1; i < 255; i++) {
        if (histogram[i - 1] < histogram[i] && histogram[i + 1] < histogram[i]) {
            peak_count++;
            if (peak_count > 2) return 0;
        }
    }
    return peak_count == 2;
}

/**
 双峰平均值算法获取二值图

 @param bit_map 图像像素数组地址（ ARGB 格式）
 @param width 图像宽
 @param height 图像高
 @param T 存储计算得出的阈值
 @return 二值图像素数组地址
 */
int * binary_image_with_average_peak_threshold_alg(int *bit_map, int width, int height, int *T) {  
    double pixel_total = width * height; // 像素总数
    if (pixel_total == 0) return NULL;

    // 灰度直方图，下标是灰度值，保存内容是灰度值对应的像素点总数
    double histogram1[256] = {0};
    double histogram2[256] = {0}; // 求均值的过程会破坏前面的数据，因此需要两份数据
    u_char threshold = 0;    // 阈值

    // 获取灰度直方图
    int *gray_pixels = (int *)malloc(pixel_total * sizeof(int));
    memset(gray_pixels, 0, pixel_total * sizeof(int));
    int *p = bit_map;
    for (u_int i = 0; i < pixel_total; i++, p++) {
        // 分离三原色及透明度
        u_char alpha = ((*p & 0xFF000000) >> 24);
        u_char red = ((*p & 0xFF0000) >> 16);
        u_char green = ((*p & 0x00FF00) >> 8);
        u_char blue = (*p & 0x0000FF);

        u_char gray = (red*38 + green*75 + blue*15) >> 7;
        if (alpha == 0 && gray == 0) {
            gray = 0xFF;
        }
        gray_pixels[i] = gray;

        // 计算灰度直方图分布，Histogram数组下标是灰度值，保存内容是灰度值对应像素点数
        histogram1[gray]++;
        histogram2[gray]++;
    }

    // 如果不是双峰，则通过三点求均值来平滑直方图
    int times = 0;
    while (!is_double_peak(histogram2)) {
        times++;
        if (times > 1000) {                // 这里使用 1000 次，考虑到过多次循环可能会存在性能问题
            return NULL;                          // 似乎直方图无法平滑为双峰的，返回错误代码
        }
        histogram2[0] = (histogram1[0] + histogram1[0] + histogram1[1]) / 3;                   // 第一点
        for (int i = 1; i < 255; i++) {
            histogram2[i] = (histogram1[i - 1] + histogram1[i] + histogram1[i + 1]) / 3;       // 中间的点
        }
        histogram2[255] = (histogram1[254] + histogram1[255] + histogram1[255]) / 3;           // 最后一点
        memcpy(histogram1, histogram2, 256 * sizeof(double));                                  // 备份数据，为下一次迭代做准备
    }

    // 求阈值T
    int peak[2] = {0};
    for (int i = 1, y = 0; i < 255; i++) {
        if (histogram2[i - 1] < histogram2[i] && histogram2[i + 1] < histogram2[i]) {
            peak[y++] = i;
        }
    }
    threshold = (peak[0] + peak[1]) / 2;

    for (u_int i = 0; i < pixel_total; i++) {
        gray_pixels[i] = gray_pixels[i] <= threshold ? 0xFF000000:0xFFFFFFFF;
    }

    if (T) {
        *T = threshold;
    }

    return gray_pixels;
}

测试执行时间数据：

iPhone 6: imageSize：260, 260； average_peak 使用时间：0.035254

iPhone 6: imageSize：800, 800； average_peak 使用时间：0.101282

经过测试，该算法在图片比较小的时候，还算可以，如果图片比较大会存在较大性能消耗，而且根据图片色彩分布不同也可能造成多次循环平滑，也会影响性能。对于 logo 来说，我们处理的时候做了压缩，一般都是很大，所以处理时间也在可以接受返回内，而且进行处理和对比时，是在异步线程中，不会影响主流程。

图片指纹 hashCode ：

图片指纹 hashCode ，可以理解为图片的唯一标识。一个简单的图片指纹生成步骤需要以下几步：

1、图片缩小尺寸一般缩小到 8 * 8 ，一共 64 个像素点。

2、将缩小的图片转换成灰度图。

3、计算灰度图的平均灰度。

4、灰度图的每个像素点的灰度与平均灰度比较。大于平均灰度，记为 1 ；小于平均灰度，记为 0。

5、计算哈希值，第 4 步的结果可以构成一个 64 为的整数，这个 64 位的整数就是该图片的指纹 hashCode 。

6、对比不同图片生成的指纹 hashCode ，计算两个 hashCode 的 64 位中有多少位不一样，即“汉明距离”，差异越少图片约相近。

由于使用该算法生成的图片指纹具有差异性比较大，因为对于 logo 来说处理后的二值图压缩到 8 * 8 后的相似性很大，所以使用 8 * 8 生成 hashCode 误差性比较大，经过试验，确实如此。所以，在此基础上，对上述中的 1、5、6 步进行了改良，改良后的这几步为：

1、图片缩小尺寸可自定义（必须是整数），但是最小像素数要为 64 个，也就是 width * height >= 64 。建议为 64 的倍数，为了减少误差。

5、哈希值不是一个 64 位的整数，而是一个存储 64 位整数的数组，数组的长度就是像素点数量对 64 的倍数（取最大的整数倍）。这样每生成一个 64 位的 hashCode 就加入到数组中，该数组就是图片指纹。

6、对比不同指纹时，遍历数组，对每一个 64 为整数进行对比不同位数，最终结果为，每一个 64 位整数的不同位数总和。

在我们对商家 logo 测试实践中发现，采用 128 * 128 的压缩，可以得到比较满意的结果。

最优算法为 OTSU 算法例子：

 

最优算法为平均灰度算法例子：

 

最优算法为双峰均值算法例子：

 

实际实验中，发现真是中选择双峰均值的概率比较低，也就是绝大多数的 logo 都是在 OTSU 和平均灰度两个算法之间选择的。所以，后续可以考虑加入选择统计，如果双峰均值概率确实特别低且结果与其他两种差不多大，那就可以去掉该方法。

4.2 问题二 （每次打印都对图片进行处理，没有缓存机制）

加入缓存机制，一般店铺的 logo 和店铺二维码都是固定的，很少会更换，所以，在进入店铺和修改店铺二维码时可以对其进行预处理，并缓存处理后的图片打印指令，后续打印时直接拿缓存使用即可。

由于缓存的内容是处理后的打印指令字符串，所以使用 NSUserDefaults 进行存储。

 

缓存策略流程图：

 

这里面为什么只有修改店铺二维码，而没有店铺 logo ？因为在我们 app 中，logo 是不可修改的，只能在 pc 后台修改，而登录店铺后，本地就可以直接拿到店铺信息；店铺二维码是在小票模板设置里自行上传的图片，所以商家在 app 中是可以自行修改店铺二维码的。

打印时图片处理流程图：

在新流程中，如果缓存中没有查到，则会走老方案去处理图片。原因是考虑到，这时候是商家实时打印小票，如果选用新方案处理，恐怕时间会加长，使用户体验降低。老方案已经在线上跑了很久，所以使用老的方案处理也问题不大。

五、未来期望与规划

在后续规划中加入几点优化：

• 添加新流程处理统计，对商家 logo 和店铺二维码处理后的最优算法进行统计，为后续优化做数据准备。
• 处理后的结果如果商家不满意，商家可以自主选择处理二值图的阈值 T ，达到满意为止。
• 图片更新不及时问题，PC 后台修改了图片无法及时更新本地缓存。
• 图片精细化处理，针对二维码可以采用分块处理算法。

其中第二点，商家自主选择阈值 T ，预览效果如下：

 

参考链接

• 灰度计算公式, by zyl910
• 大津算法, by wiki
• 图像处理算法, by laviewpbt