双线性插值

线性插值

根据百度百科的介绍：线性插值是指插值函数为一次多项式的插值方式。线性插值的几何意义即为利用过A点和B点的直线来近似表示原函数。线性插值可以用来近似代替原函数，也可以用来计算得到查表过程中表中没有的数值。
那么如下图所示，假设已知$y_1=f(x_1)$，$y_2=f(x_2)$，现在要通过线性插值的方式得到区间$[x_1,x_2]$内任何一点的$f(x)$值。
通过上图我们很容易得到以下公式：
$$\frac{y-y_1}{x-x_1}=\frac{y_2-y_1}{x_2-x_1}$$
变换可以得到：
$$y=\frac{x_2-x}{x_2-x_1}{y}_1+\frac{x-x_1}{x_2-x_1}{y}_2$$
为了方便后面理解，我们也可以写成：
$$f(x)=\frac{x_2-x}{x_2-x_1}f(x_1)+\frac{x-x_1}{x_2-x_1}f(x_2)$$

双线性插值

同样根据百度百科的介绍：双线性插值，又称为双线性内插。在数学上，双线性插值是有两个变量的插值函数的线性插值扩展，其核心思想是在两个方向分别进行一次线性插值。
通过以上介绍我们知道，双线性插值就是分别在两个方向上分别进行一次简单的线性插值即可。如下图所示，每个点的数值是由$z=f(x,y)$即$x,y$两个变量决定。下图可理解为沿z轴方向的俯视图（画三维麻烦）。我们已知$Q_{11}$, $Q_{12}$, $Q_{21}$, $Q_{22}$四个点的值，现在要在$Q_{11},Q_{12},Q_{21},Q_{22}$四个点中插入一个点$P$，并算出$P$点的值。
根据上图我们已知$Q_{11}$, $Q_{12}$, $Q_{21}$, $Q_{22}$四个点的值：
$$\begin{gathered} f(Q_{11})=f(x_1,y_1) \\ f(Q_{12})=f(x_1,y_2) \\ f(Q_{21})=f(x_2,y_1) \\ f(Q_{22})=f(x_2,y_2) \end{gathered}$$
在求$P$点的值之前，首先根据线性插值的方法求得$R_1,R_2$的值。对于$R_1$点，我们可以根据$Q_{11},Q_{21}$两个点根据线性插值的办法得到。而$Q_{11},Q_{21}$两个点的$y$值是相同的，所以两点的连线可看做只关于$x$一个变量的函数。
根据上面得到的线性插值公式：
$$f(x)=\frac{x_2-x}{x_2-x_1}f(x_1)+\frac{x-x_1}{x_2-x_1}f(x_2)$$
我们可以求得$R_1$点的值：
$$f(R_1)=\frac{x_2-x}{x_2-x_1}f(Q_{11})+\frac{x-x_1}{x_2-x_1}f(Q_{21})$$
同理，我们可以得到$R_2$点的值：
$$f(R_2)=\frac{x_2-x}{x_2-x_1}f(Q_{12})+\frac{x-x_1}{x_2-x_1}f(Q_{22})$$
得到$R_1，R_2$的插值后，接着我们去计算$P$点的插值。$R_1,R_2$两个点的$x$值是相同的，所以两点的连线可看做只关于$y$一个变量的函数。通过线性插值公式可以得到：
$$f(P)=\frac{y_2-y}{y_2-y_1}f(R_1)+\frac{y-y_1}{y_2-y_1}f(R_2)$$
带入$f(R_1)，f(R_2)$后可得到：
$$\begin{gathered} f(P)=\frac{(x_2-x)(y_2-y)}{(x_2-x_1)(y_2-y_1)}f(Q_{11})+\frac{(x-x_1)(y_2-y)}{(x_2-x_1)(y_2-y_1)}f(Q_{21}) \\ +\frac{(x_2-x)(y-y_1)}{(x_2-x_1)(y_2-y_1)}f(Q_{12})+\frac{(x-x_1)(y-y_1)}{(x_2-x_1)(y_2-y_1)}f(Q_{22}) \end{gathered}$$

图像处理中的双线性插值

在图像处理中，常见的坐标系如下图所示，以图像左上角为坐标原点，水平向右为x轴正方向，竖直向下为y轴正方向。注意像素值是从$(0,0)$点开始，假设我们在图像中插入一个点$P$，离$P$点最近的相邻四个像素点是$Q_{11},Q_{12},Q_{21},Q_{22}$并利用双线性插值的方法求其值。

• 前面我们已经得到了双线性插值的计算公式（由于图像中的y轴方向与之前的方向相反，我将相邻四个像素点的下标进行了调整，故公式不变）：
  $$\begin{gathered} f(P)=\frac{(x_2-x)(y_2-y)}{(x_2-x_1)(y_2-y_1)}f(Q_{11})+\frac{(x-x_1)(y_2-y)}{(x_2-x_1)(y_2-y_1)}f(Q_{21}) \\ +\frac{(x_2-x)(y-y_1)}{(x_2-x_1)(y_2-y_1)}f(Q_{12})+\frac{(x-x_1)(y-y_1)}{(x_2-x_1)(y_2-y_1)}f(Q_{22}) \end{gathered}$$

• 由于$Q_{11},Q_{12},Q_{21},Q_{22}$四个点是图像中相邻的像素，故有：
  $$x_2-x_1=1,y_2-y_1=1$$

• 带入公式进一步化简可得：
  $$\begin{gathered} f(P)=(x_2-x)(y_2-y)f(Q_{11})+(x-x_1)(y_2-y)f(Q_{21}) \\ +(x_2-x)(y-y_1)f(Q_{12})+(x-x_1)(y-y_1)f(Q_{22}) \end{gathered}$$

• 我们令：
  $$x-x_1=u,y-y_1=v$$

• 带入公式可得：
  $$\begin{gathered} f(P)=(1-u)(1-v)f(Q_{11})+u(1-v)f(Q_{21}) \\ +(1-u)vf(Q_{12})+uvf(Q_{22}) \end{gathered}$$

• 我们令:
  $$\begin{gathered} x_1=i,y_1=j \\ f(Q_{11})=f(i,j) \end{gathered}$$

• 那么有：
  $$\begin{gathered} f(Q_{11})=f(i,j),f(Q_{12})=f(i,j+1) \\ f(Q_{21})=f(i+1,j),f(Q_{22})=f(i+1,j+1) \end{gathered}$$

• 进一步带入公式得：
  $$\begin{gathered} f(P)=(1-u)(1-v)f(i,j)+u(1-v)f(i+1,j) \\ +(1-u)vf(i,j+1)+uvf(i+1,j+1) \end{gathered}$$
  以上公式中，你觉得哪个好理解，你就用哪个。

示例1

假设$P$点的坐标是$(2.6,2.4)$，那么距离最近的四个像素点是$(2,2),(2,3),(3,2),(3,3)$那么$u=0.6,v=0.4$，假设：
$$\begin{gathered} f(2,2)=20,f(2,3)=15 \\ f(3,2)=30,f(3,3)=40 \end{gathered}$$
通过上面的公式：
$$\begin{gathered} f(P)=(1-u)(1-v)f(i,j)+u(1-v)f(i+1,j) \\ +(1-u)vf(i,j+1)+uvf(i+1,j+1) \end{gathered}$$
计算可得（一般为小数时，会四舍五入）：
$$\begin{gathered} f(P)=0.4\times 0.6\times 20+0.6\times 0.6\times 30 \\ +0.4\times 0.4\times 15+0.6\times 0.4\times 40=27.6\approx 28 \end{gathered}$$

示例2（opencv）

下面使用opencv中的resize函数（插值方法选择双线性插值）来进行测试。首先创建一个$3\times 3$的灰度图片，参数如下：

[[30, 20, 10],
 [10, 40, 60],
 [20, 30, 40]]

下图为该$3\times 3$灰度图片的grid网格（蓝色），从$(0,0)$点开始。现在要通过双线性插值的方式resize到$2\times 2$大小。首先，需要计算resize后$2\times 2$大小的灰度图片映射在原图像（$3\times 3$灰度图片）上的坐标。

根据计算公式（$dst$表示resize后的信息，$src$为resize前的信息）：
$$\begin{gathered} X=(dstX+0.5)\times (srcWidth/dstWidth)-0.5 \\ Y=(dstY+0.5)\times (srcHeight/dstHeight)-0.5 \end{gathered}$$
可以得到$2\times 2$灰度图片$(0,0)$点坐标映射在原图上的坐标：
$$\begin{gathered} x=(0+0.5)\times (3/2)-0.5=0.25 \\ y=(0+0.5)\times (3/2)-0.5=0.25 \end{gathered}$$
以此类推，可得到如下图所示的黄色grid网格：

根据上面我们所求得的双线性插值公式计算这四个点的值：

• 对于点$(0.25,0.25)$，周围最近的四个像素是$(0,0),(1,0),(0,1),(1,1)$可得$u=0.25,v=0.25$:
  $$\begin{gathered} f(0.25,0.25)=(1-u)(1-v)f(0,0)+u(1-v)f(1,0) \\ +(1-u)vf(0,1)+uvf(1,1) \\ =0.75\ast 0.75\ast 30+0.25\ast 0.75\ast 20+0.75\ast 0.25\ast 10+0.25\ast 0.25\ast 40=25 \end{gathered}$$

• 对于点$(1.75,0.25)$，周围最近的四个像素是$(1,0),(2,0),(1,1),(2,1)$可得$u=0.75,v=0.25$:
  $$\begin{gathered} f(1.75,0.25)=(1-u)(1-v)f(1,0)+u(1-v)f(2,0) \\ +(1-u)vf(1,1)+uvf(2,1) \\ =0.25\ast 0.75\ast 20+0.75\ast 0.75\ast 10+0.25\ast 0.25\ast 40+0.75\ast 0.25\ast 60=23.125\approx 23 \end{gathered}$$

• 对于点$(0.25,1.75)$，周围最近的四个像素是$(0,1),(1,1),(0,2),(1,2)$可得$u=0.25,v=0.75$:
  $$\begin{gathered} f(0.25,1.75)=(1-u)(1-v)f(0,1)+u(1-v)f(1,1) \\ +(1-u)vf(0,2)+uvf(1,2) \\ =0.75\ast 0.25\ast 10+0.25\ast 0.25\ast 40+0.75\ast 0.75\ast 20+0.25\ast 0.75\ast 30=21.25\approx 21 \end{gathered}$$

• 对于点$(1.75,1.75)$，周围最近的四个像素是$(1,1),(2,1),(1,2),(2,2)$可得$u=0.75,v=0.75$:
  $$\begin{gathered} f(1.75,1.75)=(1-u)(1-v)f(1,1)+u(1-v)f(2,1) \\ +(1-u)vf(1,2)+uvf(2,2) \\ =0.25\ast 0.25\ast 40+0.75\ast 0.25\ast 60+0.25\ast 0.75\ast 30+0.75\ast 0.75\ast 40=41.875\approx 42 \end{gathered}$$

opencv代码测试：

import cv2 as cv
import numpy as np

img = [[30, 20, 10],
       [10, 40, 60],
       [20, 30, 40]]

img = np.array(img, dtype=np.uint8)
print(img)

re_img = cv.resize(img, (2, 2), interpolation=cv.INTER_LINEAR)
print(re_img)

终端输出：

[[30 20 10]
 [10 40 60]
 [20 30 40]]
 
[[25 23]
 [21 42]]

通过终端输出可知，opencv计算得到的结果与我们自己计算的结果是一致的。