javascriptc++opencvqtwebkit

How to assign OpenCV image to QtWebkit image element?

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

Solution

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