我想将OpenCV Mat图像分配给HTML文档中的QtWebkit图像元素。我怎样才能做到这一点?
我的解决方案是首先,在这样的函数中将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>