Alpha 混合不同大小的两个图像

Alpha blending in different size two images

解释了在相同大小的两个图像中进行 Alpha 混合 here。我们如何为两个不同尺寸的图像实现这一点。例如:600x400 像素的 PNG 用于前景,700x380 像素的 JPG 用于背景。在提到的link中,两个图像大小相同。

首先,调整大小不是一个好主意。除非同时调整两个图像的大小(这不会解决问题),否则调整大小会以不希望的方式改变最终结果(例如,前景对象会显得比预期的大)。

Alpha 混合通常用于将前景元素添加到背景图像中。因此,我会固定背景图像的大小,并将其视为输出图像的大小。在应用程序中,可能需要让前景退出背景图像,但这是一个特定的应用程序,需要更多的输入(如何扩展背景边框?)。

由于背景图像具有固定大小,我们需要一种方法来处理较小图像的 alpha 混合。考虑简化的情况,其中较小的(前景)图像与较大的(背景)图像在点 (0,0) 对齐。然后,您可以遍历背景图像,检查它是否与前景图像重叠,如果重叠,则将它们混合。

解决一般情况会引入另一个问题:定位。您需要知道 在哪里 来放置前景元素。这需要一些额外的输入。

给定较小的图像和要放置它的位置,您可以使用如下算法对较大的图像进行 alpha 混合:

let posx and posy be the placement position of the foreground image
let foreground.sizex and foreground.sizey the size of the foreground image
for each row of the background image
    for each column of the background image
        // check if the position overlaps the foreground image
        if column - posx >= 0 and column - posx < foreground.sizex
            if row - posy >= 0 and row - posy < foreground.sizey
                 alpha blend the background and the foreground
        else
            output background value

注意减去前景图片的放置位置,基本上就是平移。

直观地展示这个想法,得到输出

,您可以将其视为图像大小相同并检查重叠。如果它们重叠,则混合。如果他们不这样做,请保留背景。这将导致类似这样的结果(添加黑色边框以显示前景图像的较小尺寸):

如果不想把前景图放在左上角,直接翻译一下。 posxposy 表示应用于前景图像的平移,即红点的坐标: