简单图像效果实现(low poly)

注：我所实现的 low poly 效果是基于这篇论文所实现的，我只是做了一个 c 版本的实现。

我们先看下 low poly 的效果和实现步骤。

过程图

图像组成(可跳过)

看完效果图后先不详细说这个效果如何制作的，我们先简单了解下图像到底是怎么组成的。

比如有一张图片，它的大小是 100x100，那么这张图片的颜色信息是如何存储的呢？简单的说，这张图片一共有 10000 个点，每个点表示了一个颜色，一行 100 个点，这就是宽，一共 100 行，这就是高。那么颜色是怎么表现的呢，就是我们常见的 RGBA。

下面是我画的一个矩形，它非常的小，大小是 2x2，对应成数据结构相关的话，它可以用这样一个二维数组来表示
[
[#FF0000,#000000],
[#00FF00,#0000FF]
]
我们在 iOS 里面使用起来的话会是下面的一维数组方式，一个颜色占 4 个位置，分别来表示 RGBA ，当然，图片有许许多多的格式，所以图片的的存储肯定不是这么简单的把颜色给存进去就行了，不同格式会有不同的存储方式，这里不做讨论，只要理解这个一维数组就可以了。

理解之后再去理解一些常见的图像效果就不难了，比如灰度算法，把一张彩色的图片转成黑白效果，可以用下面这个公式。

Gray = (Red + Green + Blue) / 3

比如 R=210，G=90，B=60，这是一个橘色，采用上面的公式，计算得出 Gray=120，于是变成了 R=120，G=120，B=120，这就从橘色变成了灰色。

before

after

所以那些图像处理的效果，比如美白，泛黄，朦胧等种种效果都可以理解为，将原有的颜色(数字)，经过数学公式处理，变成了另外一个颜色(数字)。

low poly

下面来说下 low poly 的图像效果实现，我是使用了这篇论文的算法，这个作者在知乎的上回答其实已经讲的很清楚了，所以我只是对她的算法进行了实现，并没太大难度。

这里还是简单说下是如何实现的吧，一共分三个步骤。

1. 使用 Sobel 算法找到边缘点，对应上图里的 Find Edge
2. 使用 Delaunay 算法将顶点组成许许多多的三角形，对应上图里的 Delaunay
3. 取各个三角形中心点坐标的色值来填充三角形，对应上图里的 Fill Color

还有个细节就是添加一些随机顶点，避免出现非常夸张的锐角三角形，具体的分析大家可以看那个回答，我这里就不赘述了。还有就是有人建议作者对随机顶点进行泊松采样，可以让三角形的大小更一致，这个我也已经实现了，现在项目里默认启用泊松采样的效果。至于泊松采样和其他随机的区别可以看下图。

Poisson disc

这个效果我本来是想打算纯 c 实现的，这样放到 Android 上面的话就很简单了，JNI 搞一下就成，但是比较蛋疼的是在去重那一步骤，我借助了 NSSet，本来想自己写个 c 版本的，失败了，所以优化的地方还有很多，如果有啥问题和想法，欢迎大家去提 issue。代码我放到了 Github 上面，可以点这里查看。

其他

写完才发现内容有点少，这里就再补充一张我之前思考做拼接长图的方案图吧。
简单的两张图拼接其实很简单，就是数组合成，但如果是 QQ 聊天界面这种上下有重复的话就需要做一些检测，然后再合成起来。

图像拼接

然后再放个我做的 demo 效果图，如果大家对这个功能有兴趣我到时候再整理下放到 Github 上面。地址：https://github.com/DevinShine/Fusion

图像拼接

小结

本文说到了两个图片效果处理，一个是 low poly 效果，一个是长图拼接，其实说到底，都是通过一定的算法对数组进行处理，然后再将数组变回图片就行了。BTW，我之前傻乎乎的用纯 swift 来做上面那个图片拼接，图片一多，执行就要好几秒，然后全部换成 c 来实现就没问题了。