Opening, displaying and saving images with Qt 5

Hi all, this is an introductory tutorial about opening, displaying and saving images with Qt using a QGraphicsView.

Getting started

To get started, create a new Qt Widgets application.

In your designer view, add a Graphics View (located under the Display Widgets). Also add two Push Buttons. Name the first one openButton and the second one saveButton.

Editing the MainWindow class

In the edit view of the Qt editor, locate mainwindow.h and edit the private variables to add a QPixmap, QImage and a QGraphicsScene.

private:
    Ui::MainWindow *ui;
    QPixmap image;
    QImage  *imageObject;
    QGraphicsScene *scene;

Adding events for the buttons

Next, let’s add the events for our buttons. Switch back to your design view and right click your open button. In the context menu, click “go to slot…” and pick “. Do the same for your save button. You should now end up with the following events:

void MainWindow::on_openButton_pressed()
{

}

void MainWindow::on_saveButton_pressed()
{

}

Opening an image and displaying it on the QGraphicsView

To get the path of a file, we can use the QFileDialog class. We can then assign a QString like this:

QString imagePath = QFileDialog::getOpenFileName(
            this,
            tr("Open File"),
            "",
            tr("JPEG (*.jpg *.jpeg);;PNG (*.png)" )
            );

This will open a file dialog which will let you select a file to open. The function will return a QString  which we can use to open the image.

Next, we have to initialize the imageObject, image and scene variables, load the image from the path and add it to the scene and finally add the scene of the QGraphicsView to display it. Sounds like a lot! Luckily Qt makes this really easy for us, and we can do all that with only the following lines of code.

imageObject = new QImage();
imageObject->load(imagePath);

image = QPixmap::fromImage(*imageObject);

scene = new QGraphicsScene(this);
scene->addPixmap(image);
scene->setSceneRect(image.rect());
ui->graphicsView->setScene(scene);

Saving the image

Saving the image is just as easy!

QString imagePath = QFileDialog::getSaveFileName(
                this,
                tr("Save File"),
                "",
                tr("JPEG (*.jpg *.jpeg);;PNG (*.png)" )
                );

*imageObject = image.toImage();

imageObject->save(imagePath);

Using that code, we take the QImage and store it in a file that we can specify using the QFileDialog to open a save file dialog. the save() function actually takes care of the image format for us based on the extension (unless explicitly specified otherwise).

The completed events should look like this:

void MainWindow::on_openButton_pressed()
{
    QString imagePath = QFileDialog::getOpenFileName(
                this,
                tr("Open File"),
                "",
                tr("JPEG (*.jpg *.jpeg);;PNG (*.png)" )
                );

    imageObject = new QImage();
    imageObject->load(imagePath);

    image = QPixmap::fromImage(*imageObject);

    scene = new QGraphicsScene(this);
    scene->addPixmap(image);
    scene->setSceneRect(image.rect());
    ui->graphicsView->setScene(scene);

}

void MainWindow::on_saveButton_pressed()
{
    QString imagePath = QFileDialog::getSaveFileName(
                this,
                tr("Save File"),
                "",
                tr("JPEG (*.jpg *.jpeg);;PNG (*.png)" )
                );

    *imageObject = image.toImage();

    imageObject->save(imagePath);
}

That’s it! You can now easily open and save images with Qt, and display them on the QGraphicsView.

Share the knowledge!
000010