发布于 由admin

Skia 的图像重采样（Resampling）：Bilinear vs Bicubic 在缩放时的性能权衡

Skia 图像重采样：Bilinear vs Bicubic 在缩放时的性能权衡

大家好，今天我们来深入探讨 Skia 图形库中的图像重采样，特别是 Bilinear（双线性）和 Bicubic（双三次）这两种常用算法在缩放操作中的性能与质量权衡。在图像处理领域，图像缩放是一个基础且关键的操作，而重采样算法的选择直接影响缩放后的图像质量和性能。 Skia 作为一款高性能的 2D 图形引擎，提供了多种重采样算法供开发者选择，理解它们的特性，有助于我们优化图像处理流程，提升用户体验。

图像重采样的基本概念

在开始讨论 Bilinear 和 Bicubic 之前，我们需要先了解图像重采样的基本概念。 图像缩放是将图像的尺寸从一个大小调整到另一个大小。 当我们放大图像时，需要填充新的像素点；当我们缩小图像时，需要合并多个像素点。 重采样算法就是用来决定这些新像素点应该取什么值的策略。

重采样算法本质上是一个插值过程。它根据原始图像中已知像素点的值，计算出目标图像中对应位置的像素值。不同的插值方法，产生不同的视觉效果和计算复杂度。 常见的重采样算法包括：

  • Nearest Neighbor (最近邻插值): 最简单的插值方法，直接将目标像素点的值设置为距离它最近的原始像素点的值。速度最快，但图像质量最差，容易出现锯齿。
  • Bilinear (双线性插值): 使用目标像素点周围的四个原始像素点进行线性插值。 图像质量比最近邻好，锯齿感降低，计算复杂度适中。
  • Bicubic (双三次插值): 使用目标像素点周围的 16 个原始像素点进行三次插值。 图像质量更好，细节保留更多，但计算复杂度也更高。
  • Lanczos: 使用 sinc 函数的截断版本作为插值核。 图像质量通常被认为是最好的，但计算复杂度也最高。

Bilinear 插值算法

Bilinear 插值，也称为双线性插值，是一种线性插值方法的扩展，用于处理二维数据。 在图像缩放中，它使用目标像素点周围的四个原始像素点进行插值计算。

算法步骤：

  1. 找到对应关系： 确定目标图像中的像素点 (x, y) 在原始图像中的对应位置 (x’, y’)。 由于缩放比例的存在，(x’, y’) 通常不是整数。
  2. 找到四个相邻像素点： 找到原始图像中包围 (x’, y’) 的四个像素点：(x1, y1), (x2, y1), (x1, y2), (x2, y2)，其中 x1 = floor(x’), x2 = ceil(x’), y1 = floor(y’), y2 = ceil(y’)。
  3. 线性插值： 首先在 x 方向上进行两次线性插值，得到两个中间值：
    • value_top = value(x1, y1) (x2 – x’) + value(x2, y1) (x’ – x1)
    • value_bottom = value(x1, y2) (x2 – x’) + value(x2, y2) (x’ – x1)
  4. 再次线性插值： 然后在 y 方向上对 value_top 和 value_bottom 进行线性插值，得到最终的像素值：
    • value(x’, y’) = value_top (y2 – y’) + value_bottom (y’ – y1)

代码示例 (C++):

SkColor bilinearInterpolation(const SkBitmap& src, float x, float y) {
    int x1 = floor(x);
    int x2 = ceil(x);
    int y1 = floor(y);
    int y2 = ceil(y);

    // 防止越界
    x1 = std::max(0, std::min(x1, src.width() - 1));
    x2 = std::max(0, std::min(x2, src.width() - 1));
    y1 = std::max(0, std::min(y1, src.height() - 1));
    y2 = std::max(0, std::min(y2, src.height() - 1));

    float xWeight = x - x1;
    float yWeight = y - y1;

    SkColor c1 = src.getColor(x1, y1);
    SkColor c2 = src.getColor(x2, y1);
    SkColor c3 = src.getColor(x1, y2);
    SkColor c4 = src.getColor(x2, y2);

    float top = SkColorGetR(c1) * (1 - xWeight) + SkColorGetR(c2) * xWeight;
    float bottom = SkColorGetR(c3) * (1 - xWeight) + SkColorGetR(c4) * xWeight;
    U8 r = (U8)(top * (1 - yWeight) + bottom * yWeight);

    top = SkColorGetG(c1) * (1 - xWeight) + SkColorGetG(c2) * xWeight;
    bottom = SkColorGetG(c3) * (1 - xWeight) + SkColorGetG(c4) * xWeight;
    U8 g = (U8)(top * (1 - yWeight) + bottom * yWeight);

    top = SkColorGetB(c1) * (1 - xWeight) + SkColorGetB(c2) * xWeight;
    bottom = SkColorGetB(c3) * (1 - xWeight) + SkColorGetB(c4) * xWeight;
    U8 b = (U8)(top * (1 - yWeight) + bottom * yWeight);

    return SkColorSetRGB(r, g, b);
}

优势：

  • 计算简单，速度快。
  • 比最近邻插值效果好，图像锯齿感明显降低。

劣势：

  • 图像仍然可能出现模糊，高频细节丢失。

Bicubic 插值算法

Bicubic 插值，也称为双三次插值，是一种更高级的插值方法，它使用目标像素点周围的 16 个原始像素点进行插值计算。 Bicubic 插值使用三次多项式函数来逼近理想的插值函数，因此可以产生更平滑、更清晰的图像。

算法步骤：

  1. 找到对应关系： 与 Bilinear 类似，确定目标图像中的像素点 (x, y) 在原始图像中的对应位置 (x’, y’)。
  2. 找到十六个相邻像素点： 找到原始图像中包围 (x’, y’) 的 16 个像素点。 这些像素点围绕 (x’, y’) 排列成一个 4×4 的正方形。 假设 (x’, y’) 的整数部分为 (x0, y0)，则这 16 个像素点的坐标为：
    • (x0-1, y0-1), (x0, y0-1), (x0+1, y0-1), (x0+2, y0-1)
    • (x0-1, y0), (x0, y0), (x0+1, y0), (x0+2, y0)
    • (x0-1, y0+1), (x0, y0+1), (x0+1, y0+1), (x0+2, y0+1)
    • (x0-1, y0+2), (x0, y0+2), (x0+1, y0+2), (x0+2, y0+2)
  3. 计算权重： 使用三次插值核函数计算每个像素点的权重。 常用的三次插值核函数包括：
    • Catmull-Rom 样条: 最常用的 Bicubic 插值核函数。
    • B-样条: 另一种常用的 Bicubic 插值核函数。
  4. 加权平均： 将 16 个像素点的颜色值与其对应的权重相乘，然后求和，得到最终的像素值。

代码示例 (C++):

// Catmull-Rom 样条核函数
float cubicKernel(float x) {
    x = fabs(x);
    if (x <= 1) {
        return 1.5f * x * x * x - 2.5f * x * x + 1.0f;
    } else if (x <= 2) {
        return -0.5f * x * x * x + 2.5f * x * x - 4.0f * x + 2.0f;
    } else {
        return 0.0f;
    }
}

SkColor bicubicInterpolation(const SkBitmap& src, float x, float y) {
    int x0 = floor(x);
    int y0 = floor(y);

    float red = 0.0f, green = 0.0f, blue = 0.0f;

    for (int i = -1; i <= 2; ++i) {
        for (int j = -1; j <= 2; ++j) {
            int xIndex = x0 + i;
            int yIndex = y0 + j;

            // 防止越界
            xIndex = std::max(0, std::min(xIndex, src.width() - 1));
            yIndex = std::max(0, std::min(yIndex, src.height() - 1));

            SkColor color = src.getColor(xIndex, yIndex);
            float weight = cubicKernel(x - xIndex) * cubicKernel(y - yIndex);

            red += SkColorGetR(color) * weight;
            green += SkColorGetG(color) * weight;
            blue += SkColorGetB(color) * weight;
        }
    }

    // 限制颜色值在 0-255 范围内
    U8 r = (U8)std::max(0.0f, std::min(255.0f, red));
    U8 g = (U8)std::max(0.0f, std::min(255.0f, green));
    U8 b = (U8)std::max(0.0f, std::min(255.0f, blue));

    return SkColorSetRGB(r, g, b);
}

优势：

  • 图像质量更好，细节保留更多，边缘更平滑。
  • 可以减少锯齿和模糊。

劣势：

  • 计算复杂度高，速度慢。

Skia 中的重采样实现

Skia 提供了多种重采样模式，可以通过 SkSamplingOptions 类来设置。 SkSamplingOptions 可以传递给 SkCanvas::drawImage() 和其他相关函数。

Bilinear:

SkSamplingOptions samplingOptions(SkFilterMode::kLinear);
canvas->drawImage(image, x, y, samplingOptions, nullptr);

Bicubic:

Skia 提供了两种 Bicubic 插值模式：

  • SkFilterMode::kCubic (等同于 SkCubicResampler，使用 B=1/3, C=1/3 的参数)
  • SkCubicResampler (允许自定义 B 和 C 参数)
// 使用默认的 Bicubic 插值 (B=1/3, C=1/3)
SkSamplingOptions samplingOptions(SkFilterMode::kCubic);
canvas->drawImage(image, x, y, samplingOptions, nullptr);

// 使用自定义的 Bicubic 插值
SkCubicResampler cubicResampler(B, C); // B 和 C 是浮点数，控制插值核函数的形状
SkSamplingOptions samplingOptions(cubicResampler);
canvas->drawImage(image, x, y, samplingOptions, nullptr);

性能权衡

Bilinear 和 Bicubic 插值算法在图像质量和性能之间存在明显的权衡。

特性 Bilinear Bicubic
图像质量 中等 较高
细节保留 较少 较多
边缘平滑度 较好 更好
计算复杂度 低 高
速度 快 慢

何时使用 Bilinear:

  • 对性能要求较高，对图像质量要求不高。
  • 需要快速预览图像。
  • 在移动设备等资源受限的环境中。
  • 缩放比例较小，图像质量损失不明显。

何时使用 Bicubic:

  • 对图像质量要求很高，对性能要求不高。
  • 需要打印高质量的图像。
  • 需要保留图像的细节和锐度。
  • 在桌面应用等资源充足的环境中。
  • 放大倍数较大，需要减少模糊和锯齿。

影响性能的其他因素

除了重采样算法本身，还有其他因素会影响图像缩放的性能：

  • 图像大小： 图像越大，计算量越大，缩放速度越慢。
  • 缩放比例： 放大倍数越大，需要计算的像素点越多，缩放速度越慢。 缩小倍数越大，需要合并的像素越多，也影响性能。
  • 硬件加速： GPU 可以加速图像处理操作，显著提高缩放速度。 Skia 默认情况下会尝试利用 GPU 进行加速。
  • 图像格式： 不同的图像格式（如 JPEG, PNG, WebP）具有不同的压缩算法和解码速度，也会影响整体性能。
  • 内存访问模式： 优化内存访问模式可以减少缓存未命中，提高性能。

优化建议

以下是一些优化图像缩放性能的建议：

  • 选择合适的重采样算法： 根据实际需求选择合适的算法，在图像质量和性能之间取得平衡。
  • 使用硬件加速： 确保 Skia 使用 GPU 进行加速。
  • 预先缩放： 如果需要多次使用相同尺寸的图像，可以预先将图像缩放到目标尺寸，避免重复计算。
  • 使用缓存： 将缩放后的图像缓存起来，避免重复缩放。
  • 优化内存访问： 尽量按顺序访问像素数据，减少缓存未命中。
  • 使用更高效的图像格式： WebP 是一种现代图像格式，具有更高的压缩率和更好的图像质量，可以提高加载和渲染速度。
  • 使用 Skia 的内置缩放函数： Skia 提供了高度优化的缩放函数，例如 SkBitmap::resize()，尽可能使用这些函数。

示例代码：性能测试

以下代码展示了如何使用 Skia 进行 Bilinear 和 Bicubic 缩放，并进行简单的性能测试：

#include "SkBitmap.h"
#include "SkCanvas.h"
#include "SkImageEncoder.h"
#include "SkStream.h"
#include "SkTime.h"
#include <iostream>

using namespace sk_tools;

// 生成一个简单的 SkBitmap
SkBitmap createTestBitmap(int width, int height) {
    SkBitmap bitmap;
    bitmap.allocN32Pixels(width, height);
    bitmap.eraseColor(SK_ColorWHITE);
    SkCanvas canvas(bitmap);
    SkPaint paint;
    paint.setColor(SK_ColorRED);
    canvas.drawCircle(width / 2.0f, height / 2.0f, std::min(width, height) / 4.0f, paint);
    return bitmap;
}

// 缩放图像并计时
double measureScaleTime(const SkBitmap& src, int dstWidth, int dstHeight, const SkSamplingOptions& samplingOptions) {
    SkBitmap dst;
    dst.allocN32Pixels(dstWidth, dstHeight);

    SkCanvas canvas(dst);
    canvas.clear(SK_ColorTRANSPARENT);

    double startTime = SkTime::GetMSecs();
    canvas.drawImageRect(src.asImage(), SkRect::MakeIWH(src.width(), src.height()), SkRect::MakeIWH(dstWidth, dstHeight), samplingOptions, nullptr, SkCanvas::kStrict_SrcRectConstraint);
    double endTime = SkTime::GetMSecs();

    return endTime - startTime;
}

int main() {
    int srcWidth = 512;
    int srcHeight = 512;
    int dstWidth = 1024;
    int dstHeight = 1024;

    SkBitmap srcBitmap = createTestBitmap(srcWidth, srcHeight);

    // Bilinear
    SkSamplingOptions bilinearSampling(SkFilterMode::kLinear);
    double bilinearTime = measureScaleTime(srcBitmap, dstWidth, dstHeight, bilinearSampling);
    std::cout << "Bilinear Scale Time: " << bilinearTime << " ms" << std::endl;

    // Bicubic
    SkSamplingOptions bicubicSampling(SkFilterMode::kCubic);
    double bicubicTime = measureScaleTime(srcBitmap, dstWidth, dstHeight, bicubicSampling);
    std::cout << "Bicubic Scale Time: " << bicubicTime << " ms" << std::endl;

    // 输出结果
    // 例如:
    // Bilinear Scale Time: 15.2 ms
    // Bicubic Scale Time: 45.8 ms

    return 0;
}

注意： 这个示例代码只是一个简单的性能测试，实际性能会受到硬件、软件环境和图像内容的影响。 你应该根据自己的实际情况进行测试和优化。

结论：根据需求选择合适的重采样方式

今天我们深入探讨了 Skia 中 Bilinear 和 Bicubic 两种重采样算法在图像缩放时的性能权衡。 了解了它们的算法原理、优缺点以及在 Skia 中的使用方式。 希望这些知识能帮助大家在实际开发中根据需求选择合适的重采样算法，优化图像处理流程，提升用户体验。 选择合适的重采样算法，在质量和性能之间找到平衡点，是图像处理的关键。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注