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

Question

我想将 OpenCV Mat 图像分配给 HTML 文档中的 QtWebkit 图像元素。我该怎么做？

Answer 1

我的解决方案是首先，在函数中将 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();
}

之后，你必须创建一个对象到return 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;
}

然后您必须将对象的实例添加到主 window 框架：

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>

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

How to assign OpenCV image to QtWebkit image element?

javascript

c++

opencv

qtwebkit