QML中使用QQuickImageProvider实时显示相机图像

---

前言

本人是自动化设备软件开发从业人员，20年12月1日任职在新公司，并由C#转C++和qml。

QML软件上要显示相机的实时图像，需要C++中实现一个继承QQuickImageProvider的类。并且需要注意Image组件的cache属性，我就因为对qml的不熟悉并且没有系统的学习，从网上也找不到非常详细的qml相关资料，在看到公司前人写的qml程序时很是疑惑，于是写下此文章用于记录并分享给有需要的人，使其避坑。

---

一、写一个自己的类，继承QQuickImageProvider。并重写实现它的requestImage方法。

//这里多重继承，用多线程的方式更新为每个相机更新图片。
class SCVISIONSHARED_EXPORT SCCamera : public QThread, public QQuickImageProvider
{
    Q_OBJECT
    // QQuickImageProvider interface
public:
    virtual QImage requestImage(const QString &id, QSize *size, const QSize &requestedSize) override;
    

---

二、注册图像提供类和地址，特别注意一下imgProviderName，qml中需要此name用于更新图片 。

 QString imgProviderName = QString("Camera%1").arg(index);
        engine.addImageProvider(imgProviderName, dynamic_cast<QQuickImageProvider *>(cam));
        imageProviderNameMap[cameraName] = imgProviderName;

---

三、连接更新图片信号，并且设置image.source。

可参考我的另一篇博客【QML中的Connections注意事项】

代码节选：

Image{//要显示图片的image组件
	id:image
 	cache: false//此值默认为true，如果不设置为false则只会更新一张图
	Connections{
	            id: cameraConn
	            target: imgProviderClassPtr//此target为控制图片更新的C++类指针
	           
	           // 收到信号刷新图片
	            onImageChanged: {//注意此处连接的是更新图片显示的imageChanged信号，注意字母i的大小写。
	                __imgProcessingRes = imgProcessingResult
	                if(updateImage){
	                    //下面这两句是更新图片必须要的内容,一起使用。
	                    image.source = ""
	                    image.source = "image://" + imgProviderName//imgProviderName为第二点中注册的Provider名。
	                }else{
	                    __needRefreshImage = true
		             }
		         	}

---

四、在C++中，将图片传给imageProvider类，并且emit imageChanged()信号去执行QML中Connections里的onImageChanged。

---

需要特别注意：

1.在Image组件的cache属性为true时，只能通过第二种方式更新图片。为false则可以通过以下两种方式更新图片：【cam1为注册时的imgProviderName ，方法2中的斜杠不能去掉】

		第一种：
			image.source = ""
            image.source = "image://" + imgProviderName //例如： "image://cam1"
            
		第二种：
			image.source = "image://cam1/" + Math.random()

2.在执行完image.source = “image://cam1/” + Math.random()后，C++中重写的requestImage方法会被调用，返回内存中的image给QML显示。

3.image.source = “image://cam1/” + Math.random()中【 “image://”】一定要存在，后面再加上注册时的imgProviderName，相当于是给Image组件更新图片设置一个图片地址。

总结

1.QML中刷新图片和我们C#中刷新完全不同，也和QML中的数据绑定不同。它提供了特殊的刷新图片方式，并且有cache属性控制是否缓存。
2.在执行image.source = “image://cam1/” + Math.random()赋值时，会调用到C++中重写的requestImage方法，并且返回内存中的image给QML显示。【这里比较绕，不是使用信号带image参数传给QML的，而是要一个imgProvider类管理图片，并且cache属性为true时，image.source赋值需要加后缀Math.random()随机数用于更新图片，如果设置固定值则只会刷新一张图片。】
3.蓝色字体【特别注意】里两种更新方式要特别留意。在网上的诸多博客文章里，都没有找到详细的图片更新解释，如有知道更新原理的可以留言交流，欢迎指正。