QML 显示实时图像

QML 显示实时图像

想要在 QML 中实时显示相机传过来的图像，单纯 QML 中的 Image 类型并不能满足要求，因为无法通过 source：url 属性把实时的图像 QImage 传递进去，必须结合 C++ 端才能实现图像的实时显示。

以下介绍两种方法：

一、子类化 QQuickPaintedItem

QQuickPaintedItem 利用的是 QPainter。

分三步：

1. 实现纯虚函数： void QQuickPaintedItem::paint(QPainter *painter)

   // liveimageitem.cpp
   void LiveImageItem::paint(QPainter *painter)
   {
       QImage scaledImage = m_image.scaled(boundingRect().size().toSize(), Qt::KeepAspectRatio);
       QPointF leftTop = boundingRect().center() - QRectF(scaledImage.rect()).center();
       painter->drawImage(leftTop, scaledImage);
   }
   

2. 向 QML 中注册

   // main.cpp
   qmlRegisterType<LiveImageItem>("com.mycompany.qmlcomponents", 1, 0, "LiveImageItem");
   

3. 在 QML 中使用

   // qml file
   import QtQuick 2.15
   import QtQuick.Window 2.15