闪耀的二维码 之二

在做完 闪耀的二维码 之一 之后,发现好像二维码大多适合于 “静态扫”,是一张 “静态图”。我们用的可是显示器啊,是可以播放动画的。那么如何把二维码做成动态的呢?

思路

首先,我们要有两张图:一个 QR,一个背景动画。

其次,我们要把 QR 叠加到动画上。

QR 背景 预期结果
QR Background Rsult

计算宽高

我的想法是:全局补白居中。因为实现比较简单……

宽度和高度取两个图片的 max 就可以了。

当然,还有一个办法也是不错的:QR 放最左边居中,动图放右下角,QR 和动图可以有重叠。

补白

padding_width=(width-image_width)>>1padding_height=(height-image_height)>>1 来计算补白宽度。

新建一个数组,将原图放入图片中心。

掩模

这里解释一下为什么要掩模。

我们拿到的 QR 一般都是点阵图,RGB 的点阵图,如果直接 bia 到一张图片上的话,是没有透明效果的。在 Widows 画图里面,“移动” 工具默认也是背景不透明的。为了让下面的图像显示出来,我们需要一个 RGBA 的点阵图,或者是设置一个 “透明色”(例如,常用的玫红色、蓝色)。遇到 “透明色” 就不进行叠加。

我们可以使用遍历整个图片的方法将所有的透明区域标记出来,放到一个 mask 数组里面。或者使用一些 numpy 的函数(我不会用……)

叠加

叠加仅仅是个叠加么?

叠加有两种做法:第一种是数学做法,做一个加号就好了,矩阵运算,速度快,巴拉巴拉。第二种是点做法,一个一个像素来,如果不是 “透明像素”,那么上层像素值覆盖下层像素值(就像刷油漆)。后者在计算机图形学里面是一种很基础的算法。

像我这种懒人,肯定是使用加号了。但是直接加出来出现了下面的奇怪结果:

失败的例子

后来一想:对啊,图片怎么能直接加呢…… 值会超过 255 的,就死白了。

那怎么办?

先在原图中把非透明像素的区域减掉,然后再把 QR 非透明像素的区域加上去。掩模矩阵是一个 01 矩阵,是可以直接数乘的,那这项工作就变得简单了:image * (not mask) + QR * mask

我们就可以得到正确的图片啦。

示例

伪透明

我们发现上面生成的图片中,QR 的颜色过重,导致下层图片被完全覆盖,不好。有没有办法将上层图片变得 “透明” 一点呢?

继续用到计算机图形学里面学到的东西:反锯齿的公式还记得不?前景 * alpha + 背景 *(1-alpha)。试了一下,效果还不错。

代码

效果演示

呆呆最有爱了,是吧~

示例

示例

广告:单身汪求解放。

发表评论

电子邮件地址不会被公开。 必填项已用*标注