Alpha混合不同大小的两个图像 [英] Alpha blending in different size two images

问题描述

这里.我们如何针对两个不同大小的图像实现这一点.例如:前景为600x400像素PNG，背景为700x380像素JPG.在提到的链接中，两个图像的大小相同.

Alpha blending in same size two images is explained here. How do we implement this for two different size images. Ex: 600x400 pixels PNG for foreground and a 700x380 pixels JPG for background. In the mentioned link, Both the images are same size.

推荐答案

首先，调整大小是一个坏主意.除非同时调整两个图像的大小(这不能解决问题)，否则调整大小将以不希望的方式更改最终结果(例如，前景对象看起来比预期的要大).

First of, resizing is a bad idea. Unless both images are resized together (which won't solve the problem), resizing will change the final result in undesired ways (e.g. the foreground object will appear larger than intended).

Alpha混合通常用于将前景元素添加到背景图像中.因此，我将固定背景图像的大小，并考虑它也是输出图像的大小.在应用程序中，可能需要使前景退出背景图像，但这是一种特定的应用程序，需要更多的输入(如何扩展背景边框?).

Alpha blending is usually used to add foreground elements to a background image. Therefore, I would fix the size of the background image, and consider it also the output image size. In applications, one might need to have the foreground exit the background image, but that is a specific application which requires more input (how to extend the background borders?).

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

Since the background image has a fixed size, we need a way to handle the alpha blending of a smaller image. Consider the simplified case, where the smaller (foreground) image is aligned with the larger (background) image at the point (0,0). Then, you can iterate over the background image, check if it overlaps the foreground image, and if it does, blend them.

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

Solving the general cases introduces another problem: positioning. You need to know where to place the foreground element. This requires some additional input.

给出较小的图像和要放置的位置，可以使用以下算法对较大的图像进行alpha混合:

Given a smaller image and a position where you want to place it, you can alpha blend against a larger image using an algorithm as follows:

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

请注意，减去前景图像的放置位置基本上就是平移.

Note that the subtraction of the placement position of the foreground image is basically a translation.

为了直观地展示这个想法，获得输出

To show this idea visually, to get the output

，您可以将其视为图像大小相同并检查是否重叠.如果它们重叠，则混合.如果没有，请保留背景.这将导致以下情况(添加黑色边框以显示较小尺寸的前景图像):

, you can think of it as if the images were the same size and check for overlap. If they overlap, blend. If they don't, keep the background. This would result in something like this (added a black border to show the smaller size of the foreground image):

如果您不希望将前景图像放置在左上角，只需对其进行翻译即可. posx和posy代表应用于前景图像的平移，即红点的坐标:

If you don't want the foreground image to be placed in the upper left corner, simply translate it. posx and posy represent the translation applied to the foreground image, i.e. the coordinates of the red dot:

这篇关于Alpha混合不同大小的两个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！