Qt开发经验：如何在 QTextEdit 插入图片实现文本和图片共存

在很多应用程序中，我们需要在文本中插入图片，比如聊天软件中发送表情或截图，文档编辑软件中插入图片等等。QTextEdit 是 Qt 框架中一个非常强大的控件，它不仅支持普通的文本编辑，还可以处理富文本、表格、图片等。

为什么要在 QTextEdit 中插入图片？

QTextEdit 是 Qt 中一个用来显示和编辑富文本的控件。它非常适合用来显示图文混排的内容。例如：

• 聊天应用程序：用户可以发送带有图片的消息。
• 文档编辑器：用户可以在文档中插入图片，创建更富有表现力的内容。
• 社交媒体应用：插入图片来丰富文本内容，例如动态、帖子等。

在 QTextEdit 中插入图片，不仅能提高用户的交互体验，还能让界面更加生动和直观。

如何在 QTextEdit 中插入图片？

在 Qt 中，插入图片的方式非常简单。我们可以使用 QTextImageFormat 类来设置图片的路径、尺寸等，然后通过 QTextCursor 将图片插入到 QTextEdit 控件中。接下来，我们将一步步介绍如何实现这一功能。

步骤概述：

1. 选择图片文件：使用 QFileDialog 打开文件选择对话框，让用户选择图片。
2. 读取图片文件：使用 QImageReader 来验证并读取图片。
3. 调整图片尺寸：如果图片尺寸过大，进行适当缩放，确保图片能够适应显示区域。
4. 插入图片：将图片插入到 QTextEdit 中，使其与文本共存。

工程源码

通过网盘分享的文件：QTextEdit实现文本图片共存
链接: https://pan.baidu.com/s/1oCmJaoIaSB-s-RwS53NQMw?pwd=jkcf 提取码: jkcf

1. mainwindow.h 文件（头文件）

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QTextEdit>
#include <QPushButton>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private slots:
    void on_insertImageButton_clicked();  // 插入图片按钮点击事件

private:
    void insertImage(const QString &filePath);  // 插入图片的功能函数

    Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

2. mainwindow.cpp 文件（源文件）

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QFileDialog>
#include <QImageReader>
#include <QTextCursor>
#include <QTextImageFormat>
#include <QMessageBox>
#include <QDebug>

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);  // 设置UI
    setWindowTitle("图片插入示例");

    // 连接插入图片按钮的点击事件
    connect(ui->insertImageButton, &QPushButton::clicked, this, &MainWindow::on_insertImageButton_clicked);
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::on_insertImageButton_clicked()
{
    // 打开文件对话框选择图片文件
    QString filePath = QFileDialog::getOpenFileName(this, "选择图片", "", "Images (*.png *.jpg *.bmp *.gif)");

    if (filePath.isEmpty()) {
        return;
    }

    // 调用插入图片的函数
    insertImage(filePath);
}

void MainWindow::insertImage(const QString &filePath)
{
    QImageReader reader(filePath);

    // 验证文件是否为图片
    if (!reader.canRead()) {
        QMessageBox::warning(this, "错误", "无法读取该文件，确保文件是一个有效的图片文件。");
        return;
    }

    QImage image = reader.read();
    if (image.isNull()) {
        QMessageBox::warning(this, "错误", "读取图片失败，可能是文件损坏。");
        return;
    }

    // 获取原始图片宽高
    int originalWidth = image.width();
    int originalHeight = image.height();

    // 限制图片大小
    if(originalWidth > 640 || originalHeight > 640)
    {
        QMessageBox::information(this, "警告", "为提升发送效率，建议上传较小的图片。");
    }

    // 检查图片高度是否超过150，并进行调整
    int maxHeight = 150;
    int newWidth = originalWidth;
    int newHeight = originalHeight;

    if (originalHeight > maxHeight) {
        newHeight = maxHeight;
        newWidth = (originalWidth * maxHeight) / originalHeight; // 按比例缩放
    }

    // 插入图片到 QTextEdit
    QTextCursor cursor = ui->textEdit->textCursor();
    QTextImageFormat imageFormat;
    imageFormat.setName(filePath); // 设置图片路径
    imageFormat.setWidth(newWidth);
    imageFormat.setHeight(newHeight);
    cursor.insertImage(imageFormat);
}

代码解析

1. on_insertImageButton_clicked()：

   • 当用户点击插入图片按钮时，会打开一个文件选择对话框，用户可以选择一张图片文件。
   • 如果用户没有选择文件，则直接返回。如果选择了文件，则调用 insertImage 函数插入图片。

2. insertImage()：

   • 使用 QImageReader 类读取并验证图片。如果文件不能读取或损坏，会弹出错误提示框。
   • 如果图片的尺寸过大（超过 640px），弹出提示框提醒用户上传较小的图片。
   • 如果图片高度超过 150px，按比例缩放图片的宽度和高度，使其适应 QTextEdit 中的显示区域。
   • 使用 QTextCursor 插入图片，并通过 QTextImageFormat 设置图片的路径和尺寸。

核心概念

1. QFileDialog：提供了一个标准的文件对话框，用户可以通过它选择文件。在这个案例中，我们用它来选择图片文件。
2. QImageReader：用来读取图片文件并检查文件的有效性，确保我们插入的是一个正确的图片。
3. QTextImageFormat：控制图片的显示格式，例如路径、宽度和高度等。我们使用它来设置插入图片的显示效果。
4. QTextCursor：用来定位光标的位置并插入文本或图片。在这里，我们使用它在 QTextEdit 控件中插入图片。