“幻影坦克”图片的原理和任意两张图片合成幻影坦克图的完备性讨论

里看不了幻影坦克，点了也没用

大概很久很久以前有过一阵子很火的一种图片，大概就是一张图片，在预览的时候看起来是一张图，然而点进去看详情的话是另一张图。正好最近这种图不知道为啥就又火了，那就来讲讲这种图的原理。

“幻影坦克”图实际上是一张有特殊透明度分布的图片，而它实现“预览一张，详情一张”的原理实际上有点无聊：由于这张图的透明度分布，可以让图片在不同的背景色下看起来是不同的。而所谓的预览和详情不同只是利用了许多app移动端的设计：预览时的背景是白色，而全屏查看大图时，则会选择黑色作为图片背景。而在不同透明度下就显出了不同的图案。

上图在黑色和红色背景下的表现

于是幻影坦克很多问题就很好解释了：为什么幻影坦克图不生效？（只有两张图中的某一张）可能是因为：
1、某些途径下复制/保存文件会丢失alpha通道也就是透明度信息，强制把背景变成黑色，那自然是没有。
2、图片所在的平台没有使用“预览白色背景，详情黑色背景”的设计。

然而！

我们工程师自然不会满足于这样流于表象的定性解释，如果我们要把两张图合在一起，那么有什么通用的解决方案呢？
好，首先我们通过查阅资料找到了透明度叠加的公式：
Alpha混合公式如下：
R(C)=(1-alpha) * R(B) + alpha * R(A)
G(C)=(1-alpha) * G(B) + alpha * G(A)
B(C)=(1-alpha) * B(B) + alpha * B(A)
于是我们取红色为例，假设我们的目标表图（预览图）的某个坐标的像素点的红色为r1，目标里图（详情图）的某个坐标的像素点为r2。而我们图片本身的红色为r，透明度为alpha，则对于黑色、白色背景而言，上式变为：
r1 = alpha * r
r2 = 255(1 - alpha) + aplha * r

很容易解得方程：
alpha = (r1 - r2) / 255 + 1
r = r1 / alpha = r1 / ((r1 - r2) / 255 + 1) （alpha≠0）

*当alpha = 0时，r有无限根

于是我们获得了一个映射，对任意两张目标图片，已知其像素分布的情况下，都可以得到幻影图对应坐标下的颜色和对比度。

于是，我们的图片方案就完成啦！可喜可贺可喜可贺……

（然而事情并没有这么简单）
需要注意到一件事情，颜色和透明度的取值是有范围的。对于色值r而言，取值范围在[0, 255]，而对于透明度，取值在[0, 1]。
首先我们看alpha的取值范围：
0 <= alpha <= 1
将alpha的解带入可得：
0 <= (r1 - r2) / 255 + 1 <= 1
化简得
-255 <= r1 - r2 <= 0
注意到由于r1和r2都是色值，因此取值范围都是[0, 255]。因此显然r1 - r2 >= -255总是满足，因此alpha的取值范围约束使得目标图片的色值有一条件：
r2 >= r1

接下来看r，对r，有
0 <= r <= 255
代入r之后，化简可得：
0 <= r1 / (r1 - r2 + 255) <= 1
由刚才alpha的约束和开头alpha=0情况的讨论可知：r1 - r2 > -255，而r1 >= 0。因此 r1 >= 0，r1 - r2 + 255 > 0。于是 r1 - r2 + 255 >= 0始终成立。
对r1 / (r1 - r2 + 255) <= 1，根据上述讨论可化为：
r1 <= r1 - r2 + 255
得到r2 <= 255，亦始终满足。

于是制作幻影坦克图的完备性如下。
对任意两张图片1和2，若满足：
图1在任意一点的rgb色值均大于图2在相同点的色值，则可以以图1为表图，图2为里图做成一张幻影坦克图。

那完了呀！幻影坦克图对目标图片有要求，那岂不是很多表情包都做不了了？

不要慌！

我们是程序员嘛，我们最擅长的事情就是解决不了的问题让产品改需求。细心的同学可能已经发现了一件事，就是幻影图的表图看起来都比较白，里图看起来都比较黑。如果更细心一点去拿取色器看，会发现：里图里的白色部分和表图里的黑色部分都不是纯黑纯白，甚至都不算是黑色或者白色，而是在128左右的灰色。

这下破案了，解决不了问题可以改变问题嘛。我们更改一下需求，把需求的目标图都强行变成满足色值要求的图片不就行了？
于是我们给目标表图叠上一层半透明白色，给目标里图叠上一层半透明黑色，之前的r1、r2就变成了r1'、r2’:
r1' = r1 / 2
r2' = r2 / 2 + 128
由于r1 r2都在0到255之间，这样就可以让r1'和r2'都满足幻影坦克的成图条件，之后根据映射进行生成，就可以了。