Как назначить изображение OpenCV элементу изображения QtWebkit? - PullRequest
Новая
       28

Как назначить изображение OpenCV элементу изображения QtWebkit?

0 голосов
/ 29 марта 2019

Я хотел бы назначить изображение OpenCV Mat элементу изображения QtWebkit в HTML-документе.Как я могу это сделать?

1 Ответ

0 голосов
/ 29 марта 2019

Мое решение для этого состоит в том, чтобы сначала преобразовать изображение 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>
...