qml+opencv（一）

最新推荐文章于 2025-07-08 17:00:00 发布
最新推荐文章于 2025-07-08 17:00:00 发布
阅读量6.5k 收藏 7
点赞数 5
CC 4.0 BY-SA版权
分类专栏： C/C++ qt openCV qt 文章标签： qml opencv QQuickItem
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhx6044/article/details/45031517
本文探讨了如何在QML中利用OpenCV进行人脸识别的尝试。通过继承QQuickItem并实现updatePaintNode函数，将opencv图像转换为QSGTexture，结合QSGSimpleTextureNode在QML中进行渲染。作者还封装了轮廓扫描算法，并展示了初步的视觉效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

突然想起opencv，一直想做人脸识别，可是理论基础太水，只能慢慢来，去年学习了一会，然后公司让我去搞app和网络，就一直搁着，现在学习qml，突然想能不能在qml里面使用opencv，所以就有了这篇文章。

QQuickItem和QObject

在QML中，可视化的基础组件是Item，不可视化的就是QtObject，它们对应C++中的QQuickItem和QObject类，扩展QML组件一个继续基于QML中的Item扩张，还有就是继承QQuickItem，我们想把opencv加到QML中，那么只有继承QQuickItem了。
怎么使用，那还要看QML新的渲染机制，Qt5的QML渲染基于OpenGL，其场景的渲染在单独的线程进行，我们需要需要QQuickItem返回能够描述场景的对象，就是QSGNode。实现QQuick的updatePaintNode函数就OK了，我们在updatePaintNode，描述怎么渲染。

类的关系

OpenCVcapture继承QOjbect，其是图像捕获的基类，OpenCVcamera是OpenCVcapture子类，完成从摄像头捕获数据。OpenCVaction类封装了opencv图像算法操作。OpenCVshowFrame继承QQuickItem，实现可视化。

#include <QApplication>
#include <QQmlApplicationEngine>
#include <QtQml/qqml.h>
#include "opencvcamera.h"
最低0.47元/天 解锁文章

200万优质内容无限畅学
qml+opencv
冷月醉雪的博客
07-03 1177
   实现人脸检测。opencv提供了Haar分类器，其在data文件下还提供了训练的数据，所以实现这个不是很难。     我继承OpenCVaction，实现了人脸检测的算法。 #ifndef OPENCVFACEDETECTACTION_H #define OPENCVFACEDETECTACTION_H #include "opencvaction.h" class OpenCVf...
QML+OpenCV 图像处理编辑器
zhuge19870104的博客
04-17 915
程序执行的效果如下，
qml+opencv(二)
weixin_34336526的博客
05-22 207
2019独角兽企业重金招聘Python工程师标准>>> ...
QML开源库-FluentUI
最新发布
大AI时代，人性化的信息更加难得可贵
07-08 122
可以使用工具的脚手架创建工程，然后复制FluentUI文件夹到Qt Design Studio的import路径下。2.在Qt Design Studio使用FluentUI。
qml-opencv-camera
04-09
qml-opencv-camera qml-opencv-camera是使用C ++的OpenCV和QML进行摄像机访问的示例。 IP摄像机和普通摄像机均可使用。 Ubuntu 18.04 Qt的5.15.2 ， 5.14.2 OpenCV3.4.10 用法 修改camera.cpp的第17行（normal_url）以适合您的相机。 const std::string normal_url = "rtsp://admin:qwe1010@192.168.1.6:554/live2.sdp"; // origin code QtCreator的apt软件包 $ sudo apt install build-essential git cmake software-properties-common 视频编解码器 $ sudo apt install ubuntu-restrict
opencv采集图片qml做显示
10-15
一个opencv在Qt中的小应用，包含了Qt的多线程，QImage与Mat转化；封装了qml接口，还包含了opencv中的一些图片检测和矫正技术
qml + opencv，实现qml播放打开usb及网络摄像头
11-29
在IT领域，特别是软件开发，将Qt的QML与OpenCV结合使用是一种常见的技术实践，尤其是在处理图形用户界面（GUI）以及计算机视觉任务时。QML是Qt框架的一部分，用于构建现代、动态且互动的用户界面，而OpenCV则是一个...
QML+opencv实现ui动态查看图片和闪退问题解决
Xuchus的博客
12-17 863
近期学习使用QML和制作一些UI界面，需要动态的进行图片显示指定文件夹内的图片。优快云有一些其他推荐跟着写了写，发现还是有些坑存在。特此记录。参考了一些方法，比如静态加载无法实现实时改变显示的图片内容。我们需要使用继承QQuickImageProvider类来实现qml中动态加载图片的方法.其中我还需要一些对图片的处理，使用了opencv库，有同样需要可以参考。
See:查看用于手机（AndroidiOS）的QtQML + OpenCV应用程序以确定对象的颜色
05-07
您可能会发现该代码很有用，尤其是当您尝试将Qt / QML与OpenCV集成时。 拉取请求非常受欢迎。 如果您只想使用它，可以在下载APK。 取决于 Qt 5.5.0 OpenCV 2.4.11.0 编译（适用于Android） 该代码是跨平台的。 ...
Qt5.15.2+Qt6.2.1（qml）+opencv4.5.4实现扫码功能（多线程）示例.7z
11-10
QR扫码综合示例教程（二十）Qt5.15.2+Qt6.2.1（qml）+opencv4.5.4实现扫码功能（多线程）​， 示例代码 https://blog.youkuaiyun.com/aggs1990/article/details/121240139 优快云审核可能较慢，如无法下载，可以过段时间再...
qml+opencv(三)人脸检测与识别
周翔的专栏
05-11 4835
ccface介绍这个我闲的蛋疼无聊做的一个人脸检测和识别的小程序。环境Qt5+opencv2.4.9使用 通过File菜单打开关闭摄像头 ID填入标识，save保存 select 识别 检测save识别程序地址： https://git.oschina.net/zhouX/ccface.git
opencv视频采集封装qml
wanghualin033的博客
10-15 2412
这段时间由于项目要做银行卡识别，所以在很早以前就开始了解opencv了。项目前期是用qml搭建的界面，所以这里最好 能封装成qml控件。我们都知道qml是c++的扩展，opencv原本就是用c++实现的，所以这个并不是很难。 qml绘图的基元素是Item,Item是由QuickItem实现的。所以这里我们应该从QuickItem入手。为简单易用，我写成了qml插件 的形式。 第一步：新
OPenCV - QML图像处理（1）：在QML中显示OPenCV图片
友善啊，朋友的博客
12-19 7122
写在前面 以前写过一个OPenCV图像处理的工具，界面是这样的： 有兴趣的朋友用用：https://pan.baidu.com/s/16_DYfTnvp8cj7aqzXAlMGQ 提取码:5s9e 这个是用QWidget写的，打算用QML重写一遍，界面用QML，内部逻辑用C++。 不定时更新。 正文 首先要有一个显示图片的控件。根据用 C++ 编写 QML 扩展可知，这可以是一个继承QQuickPaintedItem 的自定义类，在自定义类中实现绘制图片然后将它注册到QML中。这个...
Qml 高速显示 opencv Mat
FRAM的博客
09-01 1487
在传统Qt5 程序中，显示高速图像，往往都要使用opengl，但是Qt5的opengl程序编写，自我感觉都太繁琐。后来发现在qml中使用videooutput控件，显示视频速度超快，并且代码简单。videooutput的视频源，代码如下。 // // Created by Yoo on 2020/8/13. // #ifndef DOORCONTROL_FRAMEPROVIDER_HPP #define DOORCONTROL_FRAMEPROVIDER_HPP #include <QObj
qml+opencv3.1简单打开摄像头，关闭摄像头
小白cpp
02-08 3414
    借鉴前人经验 http://blog.youkuaiyun.com/luoyayun361/article/details/61936032      利用继承QQuickImageProvider类的方法来完成opencv读取摄像头每一帧，并利用QImage绘制并发送给qml端的Image     直接上代码   #ifndef IMAGEPROVIDER_H#define IMAGEPROVIDE...
QML + OpenCV 实现qml播放打开USB及网络摄像头
gitblog_06719的博客
04-21 390
QML + OpenCV 实现qml播放打开USB及网络摄像头 去发现同类优质开源项目:https://gitcode.com/ 此仓库包含了一个qml结合opencv的示例项目，旨在演示如何在qml界面中播放并打开USB及网络摄像头。 项目简介 本项目使用了Qt框架中的qml语言进行界面开发，并结合了opencv强大的图像处理库，实现了在qml界面中实时显示摄像头画面。无论是连接到计算机的USB...
QR扫码综合示例教程（二十二）Qt5.15.2+Qt6.2.1（qml）+opencv4.5.4解决扫码聚焦、闪光灯（多线程、微信扫码）
aggs1990的专栏
11-14 2929
前言： 因笔者前期设备限制，并没有考虑摄像头聚焦、闪光灯相关，有小伙伴问到相关问题，所以笔者就测试了下。结果有点失望，但仍然共享给小伙伴们，以减少走弯路 本教程是在Qt5.15.2+Qt6.2.1（qml）+opencv4.5.4实现扫码功能（多线程、微信扫码） 示例的基础上修改 QR扫码综合示例教程（二十一）Qt5.15.2+Qt6.2.1（qml）+opencv4.5.4实现扫码功能（多线程、微信扫码）_aggs1990的专栏-优快云博客 一、Qt5.15.2摄像头聚焦问题 1.分离取景器.
qml配置opencv
03-19
### 如何在 QML 中集成与配置 OpenCV 要在 QML 中集成和配置 OpenCV，通常需要通过 C++ 后端实现 OpenCV 的功能，并将其暴露给 QML 层面进行调用。以下是具体方法： #### 1. 安装 OpenCV 库 确保已经在 Linux 或其他操作系统上成功安装了 OpenCV 库[^3]。如果尚未完成此步骤，则需按照官方文档或相关教程（如 Ubuntu 下的编译指南[^2]）完成 OpenCV 的安装。 #### 2. Qt 项目设置 为了使 OpenCV 能够正常工作于 Qt 项目中，在 `.pro` 文件中添加必要的路径和链接库： ```plaintext INCLUDEPATH += /path/to/opencv/include LIBS += -L/path/to/opencv/lib \ -lopencv_core \ -lopencv_imgproc \ -lopencv_highgui \ -lopencv_videoio ``` 上述路径应替换为实际环境中 OpenCV 的头文件目录以及动态库所在位置[^1]。 #### 3. 创建自定义 QObject 类桥接 QML 和 OpenCV 由于 QML 不支持直接访问 OpenCV 功能，因此可以创建一个继承 `QObject` 的类作为桥梁。该类封装所需的功能并将它们注册到 QML 上下文中以便使用。 ##### 示例代码 (C++) ```cpp #include <QObject> #include <QString> #include <QImage> // 导入 opencv 头文件 #include <opencv2/core.hpp> #include <opencv2/imgcodecs.hpp> #include <opencv2/highgui.hpp> class ImageProcessor : public QObject { Q_OBJECT public: explicit ImageProcessor(QObject *parent = nullptr) : QObject(parent) {} // 将 cv::Mat 转换为 QImage 并返回其数据 URL 表示形式 QString processAndConvert(const QString &filePath); signals: private slots: }; QString ImageProcessor::processAndConvert(const QString &filePath){ cv::Mat img = cv::imread(filePath.toStdString()); if(img.empty()){ return ""; } // Convert from BGR to RGB since QImage uses the latter format. cv::cvtColor(img, img, cv::COLOR_BGR2RGB); QImage qImg((uchar*)img.data, img.cols,img.rows, static_cast<int>(img.step), QImage::Format_RGB888); QByteArray byteArray; QBuffer buffer(&byteArray); buffer.open(QIODevice::WriteOnly); qImg.save(&buffer,"PNG"); // writes image into byte array in PNG format return QStringLiteral("data:image/png;base64,") + QString::fromLatin1(byteArray.toBase64().constData()); } ``` #### 4. 注册类型至 QML 为了让上面定义好的 `ImageProcessor` 可用于 QML ，还需要把它注册成上下文属性或者作为一个新的可实例化对象类型提供出来。 ##### 方法 A: 设置为 Context Property ```cpp int main(int argc, char **argv){ QApplication app(argc, argv); QQmlApplicationEngine engine; ImageProcessor processor; engine.rootContext()->setContextProperty(QStringLiteral("imageProcessor"),&processor); const QStringqmlFile=QStringLiteral("qrc:/main.qml"); engine.load(qmlFile); returnapp.exec(); } ``` ##### 方法 B: 使用 plugin 方式加载 另一种更灵活的方式是把此类打包成插件供多个工程共享复用，这里不再赘述细节。 #### 5. 在 QML 中调用处理函数 一旦完成了以上准备工作之后就可以轻松地从 QML 页面上调用这些接口啦！ ##### 主界面 .qml 文件片段 ```javascript import QtQuick 2.15 import QtQuick.Controls 2.15 ApplicationWindow{ visible:true width:640;height:480 Button{ text:"Load and Process" onClicked:{ var result=imageProcessor.processAndConvert("/absolute/path/image.jpg") console.log(result) myImageView.source=result } } ImageView{id:myImageView;} } ``` 这样就实现了基于 QML 对图像资源应用 OpenCV 进行预览显示等功能扩展^。 ---
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值