Content Table
2018-06-03

操作图像像素，实现各种效果

Qt 中图像相关的类主要是 QPixmap 和 QImage，QPixmap 没有提供访问图像像素数据的接口，访问图像的像素数据需要使用 QImage，主要的函数有 (相关重载函数没有列出来):

1
2
3
4
5
6
7
8
// 获取图像的像素数据
QRgb   pixel(int x, int y) const
QColor pixelColor(int x, int y) const
uchar* scanLine(int i)

// 设置图像的像素数据
void setPixel(int x, int y, uint index_or_rgb)
void setPixelColor(int x, int y, const QColor &color)

下面把一个图像转为灰度图为例介绍怎么操作图像的像素:

  1. 取得图像的宽、高
  2. 根据宽、高遍历每一个像素
  3. 得到每一个像素的 RGBA 颜色分量
  4. 对得到的颜色分量 RGBA 进行灰度计算得到新的颜色
  5. 使用计算得到的颜色设置对应像素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
QImage gray(QImage image) {
    // [1] 获取图像的宽和高
    int w = image.width();
    int h = image.height();

    // [2] 遍历图像的每一个像素
    for (int y = 0; y < h; ++y) {
        for (int x = 0; x < w; ++x) {
            // [3] 获取像素的 RGBA 颜色分量
            QRgb color = image.pixel(x, y);
            int r = qRed(color);
            int g = qGreen(color);
            int b = qBlue(color);
            int a = qAlpha(color);

            // [4] 计算灰色的颜色: 3 个颜色分量的平均值
            int rr = (r + g + b) / 3;
            int rg = rr;
            int rb = rr;
            color = qRgba(rr, rg, rb, a);
            
            // [5] 设置图像的像素
            image.setPixel(x, y, color);
        }
    }

    return image;
}

参数为 QImage 而不是 const QImage &，使用了 Qt 的隐式共享特性，当 QImage 的内容变化后会复制创建一个新的 QImage，不会影响原来的图像。

操作图像的像素数据是不是一点也不难，接下来实现红色蒙版效果，让图像呈现一种偏红的效果，算法是将红色通道设为红、绿、蓝三个值的平均值，而将绿色通道和蓝色通道都设为 0，参考上面的代码，很快就完成了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
QImage red(QImage image) {
    // [1] 获取图像的宽和高
    int w = image.width();
    int h = image.height();

    // [2] 遍历图像的每一个像素
    for (int y = 0; y < h; ++y) {
        for (int x = 0; x < w; ++x) {
            // [3] 获取像素的 RGBA 颜色分量
            QRgb color = image.pixel(x, y);
            int r = qRed(color);
            int g = qGreen(color);
            int b = qBlue(color);
            int a = qAlpha(color);

            // [4] 计算红色蒙版效果
            int rr = (r + g + b) / 3;
            int rg = 0;
            int rb = 0;
            color = qRgba(rr, rg, rb, a);

            // [5] 设置图像的像素
            image.setPixel(x, y, color);
        }
    }

    return image;
}

接下来大家自己实现一下亮度效果，让图像变得更亮或更暗，算法是将红色通道、绿色通道、蓝色通道，同时加上一个正值或负值。有了上面的经验，相信我们很快就能写出来。

到此我们虽然学会了操作图像的像素实现各种效果，但是仔细观察它们的代码，会发现 [1], [2], [3], [5] 部分的代码都是重复的，只有实现不同效果的部分 [4] 不同。

代码重用一直是不变的主题，对于上面的实现，可以把不变的部分封装到一个函数中，变化的部分使用函数指针传进来，实现代码重用，其实这就是使用了设计模式中的策略模式，优化后的代码如下:

  • 函数 map 封装了不变的部分

    map 不是地图，而是映射的意思，把一个像素的颜色映射成另一个颜色

  • 实现图像特效的部分使用 lambda 函数作为参数传给函数 map

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
void map(QImage *image, std::function<QRgb (int r, int g, int b, int a)> process) {
    // [1] 获取图像的宽和高
    int w = image->width();
    int h = image->height();

    // [2] 遍历图像的每一个像素
    for (int y = 0; y < h; ++y) {
        for (int x = 0; x < w; ++x) {
            // [3] 获取像素的 RGBA 颜色分量
            QRgb color = image->pixel(x, y);
            int r = qRed(color);
            int g = qGreen(color);
            int b = qBlue(color);
            int a = qAlpha(color);

            // [4] 计算效果的颜色，这里是变化的部分
            color = process(r, g, b, a);
            
            // [5] 设置图像的像素
            image->setPixel(x, y, color);
        }
    }
}

使用函数 map，灰度效果和红色蒙版效果的代码精简如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
QImage gray(QImage image) {
    map(&image, [](int r, int g, int b, int a) -> QRgb {
        int rr = (r + g + b) / 3;
        int rg = rr;
        int rb = rr;

        return qRgba(rr, rg, rb, a);
    });

    return image;
}

QImage red(QImage image) {
    map(&image, [](int r, int g, int b, int a) -> QRgb {
        int rr = (r + g + b) / 3;
        int rg = 0;
        int rb = 0;

        return qRgba(rr, rg, rb, a);
    });

    return image;
}

实现高亮效果的代码则如下:

1
2
3
4
5
6
7
8
9
10
11
QImage brightness(QImage image, int delta) {
    map(&image, [=](int r, int g, int b, int a) -> QRgb {
        int rr = qMax(0, qMin(255, r + delta));
        int rg = qMax(0, qMin(255, g + delta));
        int rb = qMax(0, qMin(255, b + delta));

        return qRgba(rr, rg, rb, a);
    });

    return image;
}

使用策略模式后，实现各种效果的代码变的非常简短、漂亮了很多，也减少了出错的几率，非常有价值。

最后附上图像效果的实现类 ImageEffects，希望大家可以把它完善的更好，增加更多的效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
// 文件名: ImageEffects.h

#ifndef IMAGEEFFECTS_H
#define IMAGEEFFECTS_H
#include <QImage>
#include <functional>

class ImageEffects {
public:
    /**
     * 灰度效果
     * 灰度效果(grayscale)就是取红、绿、蓝三个像素值的算术平均值，这实际上将图像转成了黑白形式。
     *
     * @param image 原始图片
     * @return 返回新的效果图
     */
    static QImage gray(QImage image);

    /**
     * 复古效果
     * 复古效果(sepia)则是将红、绿、蓝三个像素，分别取这三个值的某种加权平均值，使得图像有一种古旧的效果。
     *
     * @param image 原始图片
     * @return 返回新的效果图
     */
    static QImage siepa(QImage image);

    /**
     * 红色蒙版
     * 红色蒙版指的是，让图像呈现一种偏红的效果。算法是将红色通道设为红、绿、蓝三个值的平均值，而将绿色通道和蓝色通道都设为 0。
     *
     * @param image 原始图片
     * @return 返回新的效果图
     */
    static QImage red(QImage image);

    /**
     * 反转效果
     * 反转效果(invert)是指图片呈现一种色彩颠倒的效果。算法为红、绿、蓝通道都取各自的相反值(255-原值)。
     *
     * @param image 原始图片
     * @return 返回新的效果图
     */
    static QImage invert(QImage image);

    /**
     * 亮度效果
     * 亮度效果(brightness)是指让图像变得更亮或更暗。算法将红色通道、绿色通道、蓝色通道，同时加上一个正值或负值。
     *
     * @param image 原始图片
     * @return 返回新的效果图
     */
    static QImage brightness(QImage image, int delta);

    /**
     * 把图片上每一个像素的颜色映射为函数 process() 的计算结果。
     *
     * @param image   要进行变换的图片指针
     * @param process 对每一个像素的颜色进行计算的函数
     */
    static void map(QImage *image, std::function<QRgb (int r, int g, int b, int a)> process);
};

#endif // IMAGEEFFECTS_H
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
// 文件名: ImageEffects.cpp

#include "ImageEffects.h"

// 灰度效果(grayscale)就是取红、绿、蓝三个像素值的算术平均值，这实际上将图像转成了黑白形式。
QImage ImageEffects::gray(QImage image) {
    map(&image, [](int r, int g, int b, int a) -> QRgb {
        int rr = (r + g + b) / 3; // qGray(r, g, b);
        int rg = rr;
        int rb = rr;

        return qRgba(rr, rg, rb, a);
    });

    return image;
}

// 复古效果(sepia)则是将红、绿、蓝三个像素，分别取这三个值的某种加权平均值，使得图像有一种古旧的效果。
QImage ImageEffects::siepa(QImage image) {
    map(&image, [](int r, int g, int b, int a) -> QRgb {
        int rr = (r * 0.393) + (g * 0.769) + (b * 0.189); // red
        int rg = (r * 0.349) + (g * 0.686) + (b * 0.168); // green
        int rb = (r * 0.272) + (g * 0.534) + (b * 0.131); // blue

        return qRgba(rr, rg, rb, a);
    });

    return image;
}

// 红色蒙版指的是，让图像呈现一种偏红的效果。算法是将红色通道设为红、绿、蓝三个值的平均值，而将绿色通道和蓝色通道都设为 0。
QImage ImageEffects::red(QImage image) {
    map(&image, [](int r, int g, int b, int a) -> QRgb {
        int rr = (r + g + b) / 3; // red
        int rg = 0; // green
        int rb = 0; // blue

        return qRgba(rr, rg, rb, a);
    });

    return image;
}

// 反转效果(invert)是指图片呈现一种色彩颠倒的效果。算法为红、绿、蓝通道都取各自的相反值(255-原值)。
QImage ImageEffects::invert(QImage image) {
    map(&image, [](int r, int g, int b, int a) -> QRgb {
        int rr = 255 - r;
        int rg = 255 - g;
        int rb = 255 - b;

        return qRgba(rr, rg, rb, a);
    });

    return image;
}

// 亮度效果(brightness)是指让图像变得更亮或更暗。算法将红色通道、绿色通道、蓝色通道，同时加上一个正值或负值。
QImage ImageEffects::brightness(QImage image, int delta) {
    map(&image, [=](int r, int g, int b, int a) -> QRgb {
        int rr = qMax(0, qMin(255, r + delta));
        int rg = qMax(0, qMin(255, g + delta));
        int rb = qMax(0, qMin(255, b + delta));

        return qRgba(rr, rg, rb, a);
    });

    return image;
}

// 把图片上每一个像素的颜色映射为函数 process() 的计算结果
void ImageEffects::map(QImage *image, std::function<QRgb (int r, int g, int b, int a)> process) {
    int w = image->width();
    int h = image->height();

    for (int y = 0; y < h; ++y) {
        for (int x = 0; x < w; ++x) {
            QRgb color = image->pixel(x, y); // 获取每个像素都要调用一次函数 pixel()，可以使用函数 scanLine() 提高效率

            int r = qRed(color);
            int g = qGreen(color);
            int b = qBlue(color);
            int a = qAlpha(color);

            color = process(r, g, b, a);
            image->setPixel(x, y, color);
        }
    }
}

使用就很直接了，例如使用 QComboBox 切换不同的效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
connect(ui->comboBox, QOverload<const QString &>::of(&QComboBox::currentIndexChanged), [this] (const QString &text) {
    if ("原始图片" == text) {
        pixmap = QPixmap::fromImage(image);
    } else if ("灰度效果" == text) {
        pixmap = QPixmap::fromImage(ImageEffects::gray(image));
    } else if ("复古效果" == text) {
        pixmap = QPixmap::fromImage(ImageEffects::siepa(image));
    } else if ("红色蒙版" == text) {
        pixmap = QPixmap::fromImage(ImageEffects::red(image));
    } else if ("反转效果" == text) {
        pixmap = QPixmap::fromImage(ImageEffects::invert(image));
    } else if ("变亮图片" == text) {
        pixmap = QPixmap::fromImage(ImageEffects::brightness(image, 70));
    } else if ("变暗图片" == text) {
        pixmap = QPixmap::fromImage(ImageEffects::brightness(image, -70));
    }

    ui->label->setPixmap(pixmap);
});