如何将OpenCV图像分配给QtWebkit图像元素?

问题描述 投票:0回答:1

我想将OpenCV Mat图像分配给HTML文档中的QtWebkit图像元素。我怎样才能做到这一点?

javascript c++ opencv qtwebkit
1个回答
0
投票

我的解决方案是首先,在这样的函数中将OpenCV图像转换为QImage:

QImage cvMatToQImage(cv::Mat& input)
{
    cv::Mat rgbImg;
    cv::cvtColor(input, rgbImg, CV_BGR2RGB);
    QImage qImage((uchar*)rgbImg.data,
                          rgbImg.cols,
                          rgbImg.rows,
                          rgbImg.step,
                          QImage::Format_RGB888);

    return qImage.copy();
}

之后,您必须创建一个对象以在需要时返回QImage:

#include <QImage>
#include <QObject>

class ImageWrapper : public QObject
{
    Q_OBJECT;

public:
    ImageWrapper();
    Q_INVOKABLE QImage loadImage(QString path);
};

ImageWrapper的实现可以是这样的:

QImage ImageWrapper::loadImage(QString path)
{
    cv::Mat inputImage = cv::imread(path.toStdString().c_str());

    QImage img = cvMatToQImage(inputImage);
    return img;
}

然后,您必须将对象的实例添加到主窗口框架:

ImageWrapper imageWrapper;
QWebFrame* frame = this->page()->mainFrame();
frame->addToJavaScriptWindowObject(QString("ImageWrapper"), &imageWrapper)

最后在网页上,您可以将图片加载到HTML元素:

 <body>
  <input type="text" id="filepathInput"></input>
  <button id="loadImageButton" onclick="loadImage()">Load</button>
  <img id="mainImg" height="400"></img>
 </body>
</html>

<script>

function loadImage()
{
    var filepath = document.getElementById("filepathInput").value;
    var pixmap = ImageWrapper.loadImage(filepath);
    var mainImg = document.getElementById("mainImg");
    pixmap.assignToHTMLImageElement(mainImg);
}

</script>
© www.soinside.com 2019 - 2024. All rights reserved.