How to assign OpenCV image to QtWebkit image element?

46 Views Asked by Fernando At 29 March 2019 at 14:03

I would like to assign a OpenCV Mat image to a QtWebkit image element within a HTML document. How can I do that?

There are 1 best solutions below

Fernando On 29 March 2019 at 14:36 BEST ANSWER

My solution to this is to first, convert OpenCV image to QImage in a function like this:

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();
}

After that, you must create an object to return the QImage, when required:

#include <QImage>
#include <QObject>

class ImageWrapper : public QObject
{
    Q_OBJECT;

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

An implementation for the ImageWrapper can be like this:

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

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

Then you must add an instance of your object to the main window frame:

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

Finally on the webpage, you can load your image to an HTML element:

 <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>

How to assign OpenCV image to QtWebkit image element?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in C++

Related Questions in OPENCV

Related Questions in QTWEBKIT

Trending Questions

Popular # Hahtags

Popular Questions