混合图片生成工具

AutumnSun

部署地址: autumn21.top/miximg

旧版部署地址(gh-pages): autumnsun1996.github.io/MixedPNG

旧版Github仓库: AutumnSun1996/MixedPNG

混合图片生成工具其实就是基于图像的透明通道叠加原理, 让一张半透明图片在和不同的背景叠加后分别得到接近于指定的两张图片的展示效果.

这个东西其实有不少人做过一些研究, 网上也能找到一些基于PS等软件的制作教程.

但是大部分教程并没有比较完善的一套理论, 可量化地实现生成结果的优化.

因此我尝试了一些数学推导, 之后有空再继续完善吧.

数学描述

已知图像, 背景均为的矩阵。 找到图像和透明度, 使

显然,通用解不存在。为了处理无解的情况,首先对图像进行变换。

, 令, , 将原问题转化为:

找到变换参数, 图像和透明度,满足

基于图像显示限制, 要求

同时,为了保证图像还原度,应当使接近:

不是单色图片时, 可能不存在可行解,需要进一步放宽限制条件。

为单色图片时, 令, 可满足上述全部限制, 因此可行解是存在的。

像素点计算

Alpha合成(alpha compositing)公式:

当背景不透明()时,令得到:

图像使用标准化表示

对幻影图, 有:

此处已知,需要求出对任一像素点而言,rgb三个通道各有2个公式,共有6个公式,而未知数只有4个。 因此,rgb幻影图本身是无解的。

为了构造出可能的解,对图像2的显示效果进行放松, 要求变为:

从等式中可以得到:

带入,得

, , , 得:

带入二次函数最小值公式,可得最小。 此时有:

设向量之间的夹角为, 则

显然,通过减小或者调整的方向使接近1,就可以减小

,即目标颜色相同时,可以做到完美的还原,但这要求两张图片原本就一致,与幻影图的需求并不一致。 而调整使的方案则要求任意像素的的方向相同.

例如,对黑白背景下的灰度图,有, 此时, , 可以做到完美的还原。 而对于对黑白背景下的彩色图,通过降低饱和度的方式能改善显示效果,就是因为降低饱和度的结果是减小 更接近的方向, 而当均更接近的方向时,也会接近的方向。 而黑白背景下,所以将更接近0,进而使减小。

预处理

上一步中得到的计算结果为

指代, 式中

但是,这样计算得到的结果不一定能满足图片表达范围的限制.

例如,当时, 将导致。 又或者当时, 将导致

,有

变换后的图片,有

最简单情况: 黑白背景下的灰度图

此时, 灰度图各通道颜色值一致, 均用表示.

生成结果为:

,有

因为, 因此始终满足。 类似地,可以推导出始终成立。 因此,最终得到的限制条件为

即要求图像1的任意像素亮度大于或等于图像2

灰度背景下的灰度图

灰度图各通道颜色值一致, 均用表示. 由,有

设背景1的亮度更高, 则有. 由,有 即要求图像1的任意像素的亮度高于图像2, 并且低于背景亮度差加上图像2的亮度。

,有

已知

任意两种颜色背景下的灰度图

, ,

应有:

此时可将灰度图调整为近单色图, 使

黑白背景下的彩色图

此时

各颜色分量分别为:

约束条件为:

亮度递减情况

当$255 {bg1} {out1} {out2} {bg2} $时,有: ,有

要求

灰度背景下的彩色图

任意背景下的彩色图

更新

预处理亮度范围可以进行扩大 只需保证对应像素亮度差小于背景亮度差即可

求得

设目标为找到参数, 使

。为简单起见, 令, 则有:

然后得:

,分别带入原的最小值和最大值所在位置.

求解二元一次方程, 可得

为保证,有

为保证图片正常显示,应要求,此时有

此式可改写为

一般地

分别带入的原最大和最小值点,可得

数学描述

图像表示为

已知图像, 背景均为的矩阵。

, 令, ,

求变换参数, 图像和透明度,满足

基于图像显示限制, 要求

同时,为了保证图像还原度,应当使接近:

为单色图片时, 令, 可满足上述全部限制, 因此可行解是存在的。

问题转换为如下的最优化问题:

相等条件: 不等条件:

优化目标:

去饱和计算

HSL公式: RGB -> HSL:

Hue calculation:

TODO: 未完成

HSL -> RGB: C = (1 - |2L - 1|) × S X = C × (1 - |(H / 60°) mod 2 - 1|)

R', G', B' =

(R,G,B) = ((R'+m)×255, (G'+m)×255,(B'+m)×255)

  • 标题: 混合图片生成工具
  • 作者: AutumnSun
  • 创建于: 2022-04-29 19:40:42
  • 更新于: 2023-04-05 22:06:50
  • 链接: https://autumn21.top/blog/2022-04-29/30279e3e3e0d/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。