国际惯例，2楼祭度娘

首先的首先，我要把所有发图不去水印的小笨蛋全扔去喂....

1.
本次重写最大的变化或许就是终于使用了现代前端框架，这不仅使代码可维护性发生了从0到0.1的质变，也让整体界面和交互流畅度(当然这点会受网络和设备环境的影响)终于看起来像是个本世纪的网站。

整体设计风格在1.0的UI框架下嵌入了Material Design风格的控件，部分使用了 Catppuccin-Latte/Mocha调色板的颜色。当然，我听劝，如果对界面有任何意见或建议，随时都欢迎来拷打我

2.
功能上最重要的功能莫过于“复合光棱坦克”的支持了，这个新功能藏在网页的“高级”选项卡下。

正如首段提示所说，我不知道如何在网站里从零说明这东西的原理，所以使用是有一定门槛的
楼下先放一张成果图吧，说实话我也不知道贴吧会把这图压成什么样子🙁，如果真的出问题我会在楼中楼补的

这是制作时的参数设置

可见三个图的“色阶端点”有三个区间，分别在显形界面输入，就可以得到三张图



另外如果对图的来源感兴趣的话，画师是紺屋鴉江

原理是什么？怎么做呢？其实还蛮粗暴的，且听我慢慢道来
2.1
众所周知，光棱坦克的基本原理是基于灰度色阶或亮度的像素分离。简单来说，一张图中混合了两种像素，一种特别“暗”，一种特别“亮”，既然存在区别就很容易将其区分开，因此可以分离出表图和里图。
从具体实现角度来讲，我在网站中一直使用常用的加权计算的灰度值区分两种像素，灰度值低于一定阈值的像素会被视为里图像素，与之相反，灰度值高于这个阈值的像素会被视为表图像素。然后再根据阈值的高低将RGB三个通道的值等比缩放到0-255的范围内，就得到了最终的表图或里图。

2.2
既然灰度值的范围是0-255，仅计算整数都有256个取值，如果只设一个阈值岂不是太亏了？如此自然能想到多设几个区间a1-b1, a2-b2，...，假设有n个区间，那么就按照灰度值将所有像素归为n类，再稍加处理，就是n张独立的图。
对应到网站的“高级”界面，如果加载了复数图像，那么每个图像都会拥有一个独立的两个端点的滑条，这便是上面说的灰度值区间，每张图片的每个像素的灰度值都会被限制在这个区间内。

如果知道了上面说的这些基本原理，那么也不难理解这个弹窗是在说什么了。

试想有两个区间0-24和12-36，如果在编码后的图像中发现了一个灰度值为20的像素，它到底是属于第一个区间代表的图像，还是第二个区间代表的图像？乱了喔

2.3
上面之说了怎么处理像素值，那么怎么把来自不同图像的像素混合在一张图内呢？我目前采用的办法是用和左下右上对角线平行的斜线排布，同时用“权重”参数控制每个图像的每条斜线的宽度，进而控制其在最终生成的图中所占像素的比例。具体来说，权重越高，越容易直接看出，权重越低，越不容易直接看出。

这与普通制作页面中混合模式的“间距”参数效果类似。(另外关于这个全新的弹窗，我后续会详细说明)

至于为什么采用“和左下右上对角线平行的斜线”方式排布？只是因为这利好显形时默认使用的平均采样算法而已。当然如果塞得图片太多，或高权重的图数量过多，显形质量还蛮糟糕的。是需要权衡的事情。

2.4
至于其他对比度/灰度之类的就和普通光棱坦克制作没什么两样了，此处不做单独说明。只需要知道取灰度可以抗压缩，降低对比度可以降低在生成图像中的可见度(即能被直接看出的概率)就可以。

3.
其他方面的改动的话，最值得一说的或许就是这个弹窗了。

这是设置普通光棱坦克混合模式的弹窗，最上方是一个画布，可以理解为生成图像的局部像素排布，其中黑色代表“里图像素”，白色代表“表图像素”。例如默认的混合方式是1.0版本中默认的“棋盘布局”

下方总共有三个可调整的参数，斜率/间距/方向。三个参数具体有什么左右就不一一说明了，试试就能很容易地看出来。其中对质量影响较大的是“间距”参数，其值越高，里图像素在最终生成的图像中所占的比例就越低，也就越不容易看出，但相对应的显形时质量会大打折扣。

4. 另外值得一说的是，显形界面取消了“反向隐写”的参数，取而代之的是一个双端滑条。这么做的主要目的是更好地观察复合光棱坦克，也可以用来观察“反向隐写”的图——只需要将右端拖到255，然后调整左端就可以了。
当然，原先被写入自动显形元数据的图片仍然是会自动调整参数的，2.0版本的普通制作界面也同样会写入相同格式的元数据，这点上并没有什么变化 当然前提是你度高抬贵手放过这些无关紧要的元数据

附上原图

5.
最后，虽然这并不是我的第一个React项目，但确实是初学阶段的产物。推翻重写的主要目的仍然是学习与练手，有一说一写一个状态复杂的应用确实对各种概念的理解都蛮有帮助的。当然，也正因如此，在暗处必然还存在着我目前不知道的Bug和不足之处，如开头所说，我听劝，无论任何问题都可以提出，欢迎拷打
EOF

大佬