4、图片裁剪与缩放：根据屏幕分辨率动态裁剪，最近邻插值与双线性插值的性能对比

做嵌入式GUI，资源受限是常态。屏幕就那么点大，分辨率还五花八门。你想想看，一张320x240的图片，硬塞到128x64的屏幕上，不裁剪不缩放，要么显示不全，要么浪费存储。这章我们就聊聊怎么根据屏幕分辨率动态处理图片，以及两种最常用的插值算法——最近邻和双线性，到底该怎么选。

4.1 为什么要动态裁剪与缩放？

我早期做过一个手持设备项目，屏幕是128x64的单色OLED。UI设计师给了一套48x48的图标，直接显示没问题。但后来换了另一款产品，屏幕变成了240x240的彩色TFT。图标放上去，小得可怜。重新做一套？周期长，存储也吃不消。

说白了，一套资源要适配多个分辨率，就必须在运行时做裁剪和缩放。裁剪解决的是「显示区域不匹配」，缩放解决的是「尺寸不匹配」。两者经常配合使用。

4.2 裁剪策略：按屏幕比例动态切图

裁剪不是随便切。我见过有人直接取图片中心区域，结果重要信息被切掉了。正确的做法是：根据屏幕的宽高比，从图片中截取比例最接近的区域。

举个例子：图片是400x300（4:3），屏幕是240x320（3:4）。这时候如果直接缩放，图片会被压扁。正确的做法是：

1. 计算屏幕宽高比：240/320 = 0.75
2. 计算图片宽高比：400/300 ≈ 1.33
3. 图片比屏幕「宽」，所以以高度为基准，裁剪宽度：目标宽度 = 300 × 0.75 = 225
4. 从图片中心左右各取112.5像素，得到225x300的区域
5. 再将这个区域缩放到240x320

这样既保留了核心内容，又不会变形。

4.3 最近邻插值：简单粗暴，性能王者

最近邻插值，说白了就是「找最近的像素复制」。目标像素的坐标映射回原图，取最近的整数坐标像素值。

算法核心就一句话：

// 目标像素 (dstX, dstY) 映射回原图
srcX = round(dstX * srcWidth / dstWidth)
srcY = round(dstY * srcHeight / dstHeight)
pixel = src[srcY][srcX]

优点：

• 计算量极小，只有乘除法和取整
• 不产生新颜色值，保持原图色板
• 适合像素风格、图标、文字等边缘清晰的图像

缺点：

• 放大后出现明显锯齿（马赛克效应）
• 缩小后丢失细节，出现摩尔纹

4.4 双线性插值：平滑过渡，画质担当

双线性插值不是简单取一个点，而是取目标点映射回原图后，周围4个像素的加权平均。

计算过程分两步：

1. 先在X方向做两次线性插值
2. 再在Y方向做一次线性插值

// 假设映射回原图的坐标为 (fx, fy)
// 取周围四个像素: (x0,y0), (x1,y0), (x0,y1), (x1,y1)
// 其中 x0 = floor(fx), x1 = x0+1, y0 = floor(fy), y1 = y0+1
// 计算权重
dx = fx - x0
dy = fy - y0

// X方向插值
top = src[y0][x0] * (1-dx) + src[y0][x1] * dx
bottom = src[y1][x0] * (1-dx) + src[y1][x1] * dx

// Y方向插值
pixel = top * (1-dy) + bottom * dy

优点：

• 图像平滑，锯齿少
• 缩放后细节保留较好
• 适合照片、渐变、自然图像

缺点：

• 计算量大约是最近邻的4-5倍
• 会产生新的颜色值（插值结果可能不在原色板中）
• 边缘会轻微模糊

4.5 性能对比：实测数据说话

我在STM32F429上做过一组对比测试。屏幕分辨率240x320，原图480x640，缩放到屏幕大小。结果如下：

指标	最近邻插值	双线性插值
单帧耗时（ms）	12	58
内存占用（字节）	0（原地操作）	4（临时变量）
代码量（行）	~15	~40
图像质量	锯齿明显	平滑自然
适用场景	图标、文字、像素风	照片、渐变、复杂图形

你看，双线性耗时是最近邻的将近5倍。在低端MCU上，这个差距会更明显。我建议：如果CPU主频低于100MHz，且图片数量多，优先用最近邻。如果对画质有要求，再考虑双线性。

4.6 动态分辨率适配的完整流程

在实际项目中，我一般这样组织代码：

// 伪代码：动态裁剪+缩放
void render_image(Image *img, Screen *screen) {
    // 1. 计算裁剪区域
    Rect crop = calc_crop_region(
        img->width, img->height,
        screen->width, screen->height
    );
    
    // 2. 根据缩放倍数选择算法
    float scale_x = (float)screen->width / crop.width;
    float scale_y = (float)screen->height / crop.height;
    
    InterpMethod method;
    if (scale_x > 3.0f || scale_y > 3.0f) {
        method = INTERP_BILINEAR;  // 大倍数缩放用双线性
    } else if (img->type == IMG_TYPE_PHOTO) {
        method = INTERP_BILINEAR;  // 照片用双线性
    } else {
        method = INTERP_NEAREST;   // 图标用最近邻
    }
    
    // 3. 执行裁剪+缩放
    scale_image(img, crop, screen, method);
}

嗯，这里要注意：裁剪和缩放最好合并成一步操作。不要先裁剪出一块临时缓冲区，再缩放。那样会多一次内存拷贝，在资源紧张的系统里很要命。

4.7 本章知识体系

下面这张图总结了裁剪与缩放的核心逻辑：