Using QPainter’s drawPixmap/drawImage to draw images, the images look blurry.

vincentz

I used QPainter’s drawPixmap() to draw an image, and the result is shown as B in the following picture.

Then, I opened the same image in the image viewer program provided by Windows, zooming it even smaller, as shown in A in the following picture.

It’s obvious that B is larger than A, but it is not as clear as A. B has noticeable Aliasing.

I tried setRenderHint(QPainter::Antialiasing) and setRenderHint(QPainter::SmoothPixmapTransform), it had some effect, but not enough to solve the problem.

The result is even worse when I try to draw the image using QOpenGLWidget as shown in the following image.

I don’t think it’s an issue with the image’s clarity. When I use drawPixmap() to draw the image and call QPainter’s scale() method to enlarge it, I can see the details of the image.

Does anyone know how to draw images in Qt with the same level of clarity as the built-in Windows software? Even when I scale down the image, I want to avoid Aliasing problem.

JoeCFD

The resolution of your image is not high enough. B image is obtained by bilinear interpolation of your image. Try to use svg format in your image.

vincentz

This post is deleted!

vincentz

@JoeCFD
Hi joe, thanks for your reply

But Windows built-in image viewer can display high qulity without aliasing problem, same picture, same screen device.
And this problem is more noticeable on low-resolution screens, like 1920*1080.

Christian Ehrlicher

How large is your initial pixmap and how do you scale it before usage? Please provide some code.

vincentz

@Christian-Ehrlicher

I can't post code, because it makes content flagg as spam by Akismet.com.

But I post same question with example code on stackoverflow: https://stackoverflow.com/q/79233812/11525738

vincentz

I tried different ways to display the same image(OpenGL, webEngine, QPainter.drawPixmap, graphicsView), and the results varied, but all of them were of lower quality than the Windows built-in image viewer.

Christian Ehrlicher

You windows image viewer does not scale it whereas the Qt examples all scale. What do you expect?

/edit:

It works fine as long as you don't do fractional scale as this will always create artifacts depending on the used algorithm:

int main(int argc, char** argv)
{
    QApplication a(argc, argv);
    QPixmap pm("EucwlhZP.png");
    QLabel lbl, lbl2;
    lbl.setPixmap(pm);
    lbl.show();
    lbl2.setPixmap(pm.scaled(pm.size() / 4,  Qt::KeepAspectRatio, Qt::SmoothTransformation));
    lbl2.show();
    return a.exec();
}

/edit2: even with 3.244 as scale it looks very nice. Please provide a minimal, compilable example of your problem. Shouldn't be more than ten lines as you can see from my example.

vincentz

Thank you @Christian-Ehrlicher

Yes, perhaps I overcomplicated the issue. Originally, I wanted to scale down the image while still retaining its details. The implementation was as follows:

     qreal scale = 0.3;
     QPainter p(this);
     p.drawPixmap(0, 0, width() * scale, height() * scale, pixmap);

However, this approach resulted in blurriness. When I used your method to scale down the image, this issue did not occur.

     qreal scale = 0.3;
     QPainter p(this);
     p.drawPixmap(0, 0, pixmap.scaled(pixmap.size() * scale, Qt::KeepAspectRatio, Qt::SmoothTransformation));

I think you’ve inspired me and solved my problem. Thank you very much!

vincentz

Let me summarize, hoping it can help others who are stuck like I was.

I was planning to impelment a image viewer that supports zooming in and out of images. The method I used to zoom out is as follows:

CanvasWidget::CanvasWidget(QImage img, QWidget *parent)
    : QWidget{parent}, scale(1.0)
{
    pixmap = QPixmap::fromImage(img);
}

void CanvasWidget::paintEvent(QPaintEvent *e) {
    QPainter p(this);
    p.drawPixmap(0,0,width() * scale, height() * scale, pixmap);
    // ...
}

In this approach, the image became blurry when I zoom out. I tried several methods, such as:
• Scaling the QPainter before drawing the image: painter.scale(scale, scale);
• Displaying the image using QGraphicsView
• Using QWebEngineView to display the image

In both QGraphicsView and QWebEngineView, the image resizes with the view. However, when the view is resized to a smaller size, the image still becomes blurry.

I even tried drawing the image as a texture in QOpenGLWidget but the image still appeared blurry when resized to a smaller size.

Finally, inspired by @Christian-Ehrlicher , I relized that, these methods unintentionally scaled down the image when resize it's container smaller, causing it to become blurry.

My implementation cannot be considered “wrong”, it just doesn’t meet my requirements.

Qt Doc says:

In some cases it can be more beneficial to draw the pixmap to a painter with a scale set rather than scaling the pixmap. This is the case when the painter is for instance based on OpenGL or when the scale factor changes rapidly.

If you want to maintain the quality of the image while zooming out, you should implement the following method as Christian saied.

p.drawPixmap(0, 0, pixmap.scaled(pixmap.size() * scale, Qt::KeepAspectRatio, Qt::SmoothTransformation));