QQuickImageProvider 를 이용한 Qml 에서 이미지 표시

QML 에서 기본적으로 이미지를 표시하려면 Image 아이템을 사용하면된다. 로컬 파일 시스템이나 웹에 있는 이미지도 훌륭하게 표시할 수 있다. 애플리케이션이 시작될 때 Qt 리소스에서 Qml을 로드하는 경우, Qml뿐만 아니라 모든 이미지는 Qt리소스에서 로드된다.

 

자주는 아니지만 RGB 데이터를 표시해야 하는 경우가 있다. 이런 이미지를 화면에 나타내야 할 필요가 있을 경우 QQuickImageProvider 를 서브클래싱하고 QImage 를 제공하여 QML에서 표시할 수 있다.

 

아래 예제는 QQuickImageProvider 를 이용한 이미지 표시 방법을 보여준다.

 

imageprovider.h

#ifndef IMAGEPROVIDER_H
#define IMAGEPROVIDER_H
 
#include <QQuickImageProvider>
 
class ImageProvider : public QObject, public QQuickImageProvider
{
   Q_OBJECT
  public:

 
   ImageProvider();
   ~ImageProvider();
   static ImageProvider * instance();
   QImage requestImage(const QString& id, QSize* size, const QSize& requestedSize);
   QPixmap requestPixmap(const QString& id, QSize* size, const QSize& requestedSize);
};

#endif // IMAGEPROVIDER_H

 

imageprovider.cpp

#include "imageProvider.h"
#include <QFile>
#include <QImage>
#include <QPixmap>
#include <QDebug>

ImageProvider *ImageProviderInstance;

ImageProvider::ImageProvider()
    :QQuickImageProvider(QQmlImageProviderBase::Image)
{
    
}

ImageProvider::~ImageProvider()
{
    
}

ImageProvider *ImageProvider::instance()
{
    if(ImageProviderInstance)
    {
        return ImageProviderInstance;
    }
    else
    {
        ImageProviderInstance = new ImageProvider;
        return ImageProviderInstance;
    }
}

QImage ImageProvider::requestImage(const QString& id, QSize* size, const QSize&    requestedSize)
{
    QImage image(id);
    QImage result;
    
    
    if (requestedSize.isValid()) {
        result = image.scaled(requestedSize, Qt::KeepAspectRatio);
    } else {
        result = image;
    }
    *size = result.size();
    return result;
}

QPixmap ImageProvider::requestPixmap(const QString& id, QSize* size, const QSize& requestedSize)
{
    QPixmap image(id);
    QPixmap result;
    
    
    if (requestedSize.isValid()) {
        result = image.scaled(requestedSize, Qt::KeepAspectRatio);
    } else {
        result = image;
    }
    *size = result.size();
    return result;
}

 

mainwindow.cpp 에 imageprovider객체 등록

 context->engine()->addImageProvider(QString("extern"), ImageProvider::instance());

 

Qml 애플리케이션

 Image {
    id: img
    x: 0
    y: 25
    width: 227
    height: 230
    anchors.horizontalCenter: parent.horizontalCenter
     source: "image://extern/"+path
    //doesn't find absolute path in windows source: "file://"+path
    fillMode: Image.PreserveAspectFit
}

 

참고: http://stackoverflow.com/questions/15865846/error-while-set-up-absolute-image-path-in-qml-qt-under-windows