前言

開發Qt應用時，想把QImage發送到QML端通過Image組件顯示出來，這種場景主要用在例如在C++端調用android系統接口截圖然后發送到QML端顯示，或者C++端QWidget截圖然后讓QML界面中顯示。要想實現該功能，需要用到一個重要的類QQuickImageProvider，這是專門從C++端提供圖片到QML顯示的。

正文

先來看看Qt的示例

首先定義一個類并繼承于QQuickImageProvider，然后重新實現接口requestPixmap，如果需要傳入QImage圖片的話就重寫requestImage接口，原理是一樣的，詳情查看Qt官方文檔。

class ColorImageProvider : public QQuickImageProvider{public:ColorImageProvider(): QQuickImageProvider(QQuickImageProvider::Pixmap){}QPixmap requestPixmap(const QString &id, QSize *size, const QSize &requestedSize){int width = 100;int height = 50;if (size)*size = QSize(width, height);QPixmap pixmap(requestedSize.width() > 0 ? requestedSize.width() : width,requestedSize.height() > 0 ? requestedSize.height() : height);pixmap.fill(QColor(id).rgba());return pixmap;}};

然后在main函數中添加圖片入口，使用addImageProvider函數

int main(int argc, char *argv[]){...QQuickView view;QQmlEngine *engine = view.engine();engine->addImageProvider(QLatin1String("colors"), new ColorPixmapProvider);...}

再在QML端界面上顯示

Column {Image { source: "image://colors/yellow" }Image { source: "image://colors/red" }}

這里的colors就是main函數中定義的圖片文件夾名稱，yellow和red相當于id，也就是在requestPixmap中的第一個參數可以拿到這個值。編譯運行后，得到如下示意圖：

動態刷新圖片

以上是顯示一張靜態圖片，如果是要動態的刷新QML的圖片要怎么辦呢？接著看

class ImageProvider : public QQuickImageProvider { public:ImageProvider();QImage requestImage(const QString &id, QSize *size, const QSize &requestedSize);QPixmap requestPixmap(const QString &id, QSize *size, const QSize &requestedSize);QImage img;}; #include "imageprovider.h"ImageProvider::ImageProvider(): QQuickImageProvider(QQuickImageProvider::Image) { }QImage ImageProvider::requestImage(const QString &id, QSize *size, const QSize &requestedSize) {return this->img; }QPixmap ImageProvider::requestPixmap(const QString &id, QSize *size, const QSize &requestedSize) {return QPixmap::fromImage(this->img); }

然后再定義一個類

class ShowImage : public QObject {Q_OBJECT public:explicit ShowImage(QObject *parent = 0);ImageProvider *m_pImgProvider; public slots:void setImage(QImage image); signals:void callQmlRefeshImg(); }; ShowImage::ShowImage(QObject *parent) :QObject(parent) {m_pImgProvider = new ImageProvider(); } void ShowImage::setImage(QImage image) {m_pImgProvider->img = image;emit callQmlRefeshImg(); }

然后在main函數中注冊

ShowImage *CodeImage = new ShowImage(this);engine.rootContext()->setContextProperty("CodeImage",CodeImage);engine.addImageProvider(QLatin1String("CodeImg"), CodeImage->m_pImgProvider);

回到QML中調用

Image{id:imganchors.fill: parent}Connections{target: CodeImageonCallQmlRefeshImg:{img.source = ""img.source = "image://CodeImg"}}

注意，這里刷新圖片的時候必須先設置為空img.source = “”，否則無法刷新。另外，我在Mac 上用 Qt5.11版本測試的時候，發現圖片依然不能刷新，然后在 Image 屬性加上一句：cache:false 就搞定了，不顯示的原因是 Image 自動做了緩存，把緩存去掉就行了。
這樣一來，C++端設置新圖片后會發送信號，在QML端連接信號然后去圖片目錄下去取出來刷新當前控件。原理很簡單，不再贅述。

添加了演示代碼，在這里

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Qt C++发送图片到QML显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。