C++学习之路（十四）C++ 用Qt5实现一个工具箱（增加一个Base64图片编码预览功能）- 示例代码拆分讲解
上篇文章，我们用 Qt5 实现了在小工具箱中添加了《Base64加解密功能》功能。为了继续丰富我们的工具箱，今天我们就再增加一个平时经常用到的功能吧，就是「 Base64图片编码预览 」功能。下面我们就来看看如何来规划开发一个这样的小功能并且添加到我们的工具箱中吧。
老规矩，先看效果
Base64 图片编码与预览功能概述
概述：
Base64 是一种将二进制数据编码成 ASCII 字符串的方式，常用于在文本环境中传输或存储二进制数据。Base64 图片编码与预览功能允许用户将图片文件转换为 Base64 编码，并能够将 Base64 编码的图片数据还原为图片进行预览显示。
功能需求：
-
图片转换为 Base64 编码： 提供一个文件选择对话框，允许用户选择图片文件，并将所选图片转换为 Base64 编码。
-
Base64 编码转换为图片预览： 允许用户将输入的 Base64 编码转换为图片，并在界面中预览显示。
-
反馈与提示： 在用户操作错误或输入无效时，提供适当的反馈与提示信息，以便用户了解操作状态或错误原因。
-
界面清晰： 界面布局清晰明了，确保用户能够轻松找到功能按钮和预览区域。
-
实时预览： 尽可能提供实时或及时的图片预览，以便用户确认转换效果。
-
容错性： 能够处理常见的图片格式，如 PNG、JPEG 等，并能够正确处理 Base64 编码的数据。
-
用户友好性： 界面简洁友好，操作直观，让用户能够方便地完成图片与 Base64 编码之间的转换与预览。
核心代码实现
新增两个新的控件
#include class Base64ImageConverter : public QWidget {
Q_OBJECT
public:
explicit Base64ImageConverter(QWidget *parent = nullptr) : QWidget(parent) {
auto *layout = new QVBoxLayout(this);
selectImageButton = new QPushButton("选择图片", this);
connect(selectImageButton, &QPushButton::clicked, this, &Base64ImageConverter::selectImage);
layout->addWidget(selectImageButton);
imagePathTextEdit = new QTextEdit(this);
imagePathTextEdit->setReadOnly(true);
layout->addWidget(imagePathTextEdit);
convertToBase64Button = new QPushButton("转换为Base64编码", this);
connect(convertToBase64Button, &QPushButton::clicked, this, &Base64ImageConverter::convertToBase64);
layout->addWidget(convertToBase64Button);
base64OutputTextEdit = new QTextEdit(this);
base64OutputTextEdit->setAcceptRichText(false);
layout->addWidget(base64OutputTextEdit);
convertToImagePreviewButton = new QPushButton("Base64编码转图片预览", this);
connect(convertToImagePreviewButton, &QPushButton::clicked, this, &Base64ImageConverter::convertToImagePreview);
layout->addWidget(convertToImagePreviewButton);
imagePreviewLabel = new QLabel(this);
imagePreviewLabel->setFixedHeight(200); // 设置图片高度为 200
layout->addWidget(imagePreviewLabel);
setLayout(layout);
}
private slots:
void selectImage() {
// 创建文件对话框用于选择图片文件
QString imagePath = QFileDialog::getOpenFileName(this, tr("选择图片"), "", tr("Images (*.png *.jpg *.bmp)"));
// 如果用户选择了图片文件，则显示文件路径
if (!imagePath.isEmpty()) {
imagePathTextEdit->setText(imagePath);
selectedImagePath = imagePath;
}
}
void convertToBase64() {
if (selectedImagePath.isEmpty()) {
QMessageBox::warning(this, "警告", "请先选择图片");
return;
}
// 读取选定图片文件的内容
QFile file(selectedImagePath);
if (file.open(QIODevice::ReadOnly)) {
QByteArray imageData = file.readAll();
QString base64Data = imageData.toBase64();
base64OutputTextEdit->setText(base64Data);
} else {
QMessageBox::critical(this, "错误", "无法读取图片文件");
}
}
void convertToImagePreview() {
QString base64Data = base64OutputTextEdit->toPlainText().toUtf8();
if (base64Data.isEmpty()) {
QMessageBox::warning(this, "警告", "请先转换为Base64编码");
return;
}
// 从Base64数据创建QImage并显示在标签中
QByteArray byteArray = QByteArray::fromBase64(base64Data.toUtf8());
QImage image;
image.loadFromData(byteArray);
if (!image.isNull()) {
// 水平居中对齐
imagePreviewLabel->setAlignment(Qt::AlignHCenter);
// 缩放图片到 200x200
QPixmap pixmap = QPixmap::fromImage(image.scaled(200, 200, Qt::KeepAspectRatio));
imagePreviewLabel->setPixmap(pixmap);
} else {
QMessageBox::critical(this, "错误", "无法加载图片");
}
}
private:
QPushButton *selectImageButton;
QTextEdit *imagePathTextEdit;
QPushButton *convertToBase64Button;
QTextEdit *base64OutputTextEdit;
QPushButton *convertToImagePreviewButton;
QLabel *imagePreviewLabel;
QString selectedImagePath;
};
核心代码拆分讲解
首先，这段代码是一个自定义的 Base64ImageConverter 类，继承自 QWidget，用于在界面中实现图片与 Base64 编码的转换。
class Base64ImageConverter : public QWidget {
Q_OBJECT
public:
explicit Base64ImageConverter(QWidget *parent = nullptr) : QWidget(parent) {
// ... 界面布局
}
private slots:
void selectImage() {
// ...
}
void convertToBase64() {
// ...
}
void convertToImagePreview() {
// ...
}
private:
// ... 控件指针和变量声明
};
界面布局
auto *layout = new QVBoxLayout(this);
// 选择图片按钮
selectImageButton = new QPushButton("选择图片", this);
connect(selectImageButton, &QPushButton::clicked, this, &Base64ImageConverter::selectImage);
layout->addWidget(selectImageButton);
// 图片路径文本框
imagePathTextEdit = new QTextEdit(this);
imagePathTextEdit->setReadOnly(true);
layout->addWidget(imagePathTextEdit);
// 转换为Base64编码按钮
convertToBase64Button = new QPushButton("转换为Base64编码", this);
connect(convertToBase64Button, &QPushButton::clicked, this, &Base64ImageConverter::convertToBase64);
layout->addWidget(convertToBase64Button);
// Base64编码输出文本框
base64OutputTextEdit = new QTextEdit(this);
// 设置为可编辑
base64OutputTextEdit->setAcceptRichText(false);
layout->addWidget(base64OutputTextEdit);
// 转换为图片预览按钮
convertToImagePreviewButton = new QPushButton("Base64编码转图片预览", this);
connect(convertToImagePreviewButton, &QPushButton::clicked, this, &Base64ImageConverter::convertToImagePreview);
layout->addWidget(convertToImagePreviewButton);
// 图片预览标签
imagePreviewLabel = new QLabel(this);
imagePreviewLabel->setFixedHeight(200); // 设置图片高度为 200
layout->addWidget(imagePreviewLabel);
setLayout(layout);
成员函数
- 选择图片功能
void selectImage() {
QString imagePath = QFileDialog::getOpenFileName(this, tr("选择图片"), "", tr("Images (*.png *.jpg *.bmp)"));
if (!imagePath.isEmpty()) {
imagePathTextEdit->setText(imagePath);
selectedImagePath = imagePath;
}
}
QFileDialog::getOpenFileName是一个静态函数，用于获取用户选择的文件路径对话框。imagePathTextEdit->setText(imagePath)将选择的图片路径显示在imagePathTextEdit文本框中。selectedImagePath存储用户选择的图片路径。
- 转换为 Base64 编码功能
void convertToBase64() {
if (selectedImagePath.isEmpty()) {
QMessageBox::warning(this, "警告", "请先选择图片");
return;
}
QFile file(selectedImagePath);
if (file.open(QIODevice::ReadOnly)) {
QByteArray imageData = file.readAll();
QString base64Data = imageData.toBase64();
base64OutputTextEdit->setText(base64Data);
} else {
QMessageBox::critical(this, "错误", "无法读取图片文件");
}
}
QFile用于访问文件。QIODevice::ReadOnly表示以只读模式打开文件。file.readAll()读取整个文件内容到imageData中。imageData.toBase64()将图片数据转换为 Base64 编码。base64OutputTextEdit->setText(base64Data)将 Base64 编码显示在base64OutputTextEdit文本框中。
- Base64 编码转换为图片预览功能
void convertToImagePreview() {
QString base64Data = base64OutputTextEdit->toPlainText().toUtf8();
if (base64Data.isEmpty()) {
QMessageBox::warning(this, "警告", "请先转换为Base64编码");
return;
}
QByteArray byteArray = QByteArray::fromBase64(base64Data.toUtf8());
QImage image;
image.loadFromData(byteArray);
if (!image.isNull()) {
// 水平居中对齐
imagePreviewLabel->setAlignment(Qt::AlignHCenter);
QPixmap pixmap = QPixmap::fromImage(image.scaled(200, 200, Qt::KeepAspectRatio));
imagePreviewLabel->setPixmap(pixmap);
} else {
QMessageBox::critical(this, "错误", "无法加载图片");
}
}
imagePreviewLabel->setAlignment(Qt::AlignHCenter)设置图片在标签中水平居中显示。QByteArray::fromBase64将 Base64 编码的字符串转换为字节数组。QImage::loadFromData从字节数组加载图像数据到image对象中。QPixmap::fromImage将QImage转换为QPixmap，并使用scaled调整图片大小。imagePreviewLabel->setPixmap(pixmap)在imagePreviewLabel标签中显示图片。
好了，总体上这个小工具为我们提供了选择图片、将图片转换为 Base64 编码和将 Base64 编码转换为图片预览的功能。
讲解完毕，下面是完整代码，复制到本地跑一跑吧~
#include 想要了解这个小工具是如何发展到现在这个地步的话，就看看往期文章吧~，记得要多跑一跑代码。如果大家有什么想要的功能或者想问的问题的话，就在评论区留言吧。Thanks♪(･ω･)ﾉ
往期文章一览
C++学习之路（一）什么是C++？如何循序渐进的学习C++？【纯干货】
C++学习之路（二）C++如何实现一个超简单的学生信息管理系统？C++示例和小项目实例
C++学习之路（三）解析讲解超简单学生信息管理系统代码知识点 - 《根据实例学知识》
C++学习之路（四）C++ 实现简单的待办事项列表命令行应用 - 示例代码拆分讲解
C++学习之路（五）C++ 实现简单的文件管理系统命令行应用 - 示例代码拆分讲解
C++学习之路（六）C++ 实现简单的工具箱系统命令行应用 - 示例代码拆分讲解
C++学习之路（七）C++ 实现简单的Qt界面（消息弹框、按钮点击事件监听）- 示例代码拆分讲解
C++学习之路（八）C++ 用Qt5实现一个工具箱（增加一个粘贴板记录管理功能）- 示例代码拆分讲解
C++学习之路（九）C++ 用Qt5实现一个工具箱（增加一个JSON数据格式化功能）- 示例代码拆分讲解
C++学习之路（十）C++ 用Qt5实现一个工具箱（增加一个时间戳转换功能）- 示例代码拆分讲解
C++学习之路（十一）C++ 用Qt5实现一个工具箱（增加一个进制转换器功能）- 示例代码拆分讲解
C++学习之路（十二）C++ 用Qt5实现一个工具箱（增加一个XML文本格式化功能）- 示例代码拆分讲解
C++学习之路（十三）C++ 用Qt5实现一个工具箱（增加一个Base64加解密功能）- 示例代码拆分讲解
好了~ 本文就到这里了，感谢您的阅读，每天还有更多的实例学习文章等着你 。别忘了点赞、收藏~ Thanks♪(･ω･)ﾉ 。