Convert an uploaded from desktop image to black and white in Qt

Bro Bro 0
Viewed 42

My program consists of two functions: first a user clicks a button (btn_image) to upload an image from desktop and it displays on the label (lbl_image). Secondly, I push another button (cnv_image) in order to change the colors of that uploaded image to black and white.

I have managed to implement the first function: the image chosen by a user successfully displays. However, I am confused how to convert that image to b&w. I wrote a function that is triggered after clicking the cnv_image button, but the problem is to refer to that uploaded image. So, when I click cnv_image buttom the uploaded image simply disappears.

I tried to use image.load (ui->lbl_image) to refer to the label which contains the image but it shows a mistake.

How can I implement my second function?

void MainWindow::on_btn_image_clicked()
{
    QString fileName = QFileDialog::getOpenFileName(this, tr("Choose"), "", tr("Images (*.png *.jpg *jpeg)"));
    if (QString::compare(fileName, QString()) != 0) {
        QImage image;
        bool valid = image.load(fileName);

        if (valid) {
            ui->lbl_image->setPixmap(QPixmap::fromImage(image));
        }
    }


}



void MainWindow::on_cnv_image_clicked()
{
    QImage image;
    image.load(ui->lbl_image);

    QSize sizeImage = image.size();
      int width = sizeImage.width(), height = sizeImage.height();

    QRgb color;

    for (int f1=0; f1<width; f1++) {
            for (int f2=0; f2<height; f2++) {
                int gray = qGray(color);
                image.setPixel(f1, f2, qRgb(gray, gray, gray));
            }
        }

    ui->lbl_image->setPixmap(QPixmap::fromImage(image));

}

enter image description here

enter image description here

qt image
2 Answers

I update your code, I add QImage image; as private member of MainWindow class so In mainwindow.h :

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

QT_BEGIN_NAMESPACE
namespace Ui
{
class MainWindow;
}
QT_END_NAMESPACE

class MainWindow: public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);

    ~MainWindow();

private slots:
    void  on_btn_image_clicked();

    void  on_cnv_image_clicked();

private:
    Ui::MainWindow *ui;
    QImage          image;
};

#endif // MAINWINDOW_H

and in on_cnv_image_clicked function

void  MainWindow::on_cnv_image_clicked()
{
    QSize  sizeImage = image.size();
    int    width = sizeImage.width(), height = sizeImage.height();
    QRgb   color;
    int    value;

    for (int f1 = 0; f1 < width; f1++)
    {
        for (int f2 = 0; f2 < height; f2++)
        {
            color = image.pixel(f1, f2);
            int  gray = (qRed(color) + qGreen(color) + qBlue(color)) / 3;
            image.setPixel(f1, f2, qRgb(gray, gray, gray));
        }
    }

    ui->lbl_image->setPixmap(QPixmap::fromImage(image));
    ui->lbl_image->setScaledContents(true);
}

Result :

enter image description here

enter image description here

Parisa.H.R0

Welcome to Stackoverflow!

First of all, it's a good idea to keep a copy of the QImage in your class when you load it. It helps to avoid extra conversions from QPixmap to QImage in next steps. I'll skip it because it's out of the scope of your question.

You can use QImage::convertTo to convert the format of a QImage in place. It means that, it does not create a new QImage. As per documentation it may detach the QImage. You can read more about Implicit Sharing if you are interested.

So, the implementation should be something like:

void MainWindow::on_cnv_image_clicked()
{
    QImage image = ui->lbl_image->pixmap().toImage();
    image.convertTo(QImage::Format_Grayscale8);
    ui->lbl_image->setPixmap(QPixmap::fromImage(image));
}

Take a look at the list of QImage::Formats to evaluate other grayscale/mono options.

Soheil Armin0
Related