Qt 在 QtWebEngine 视图中显示 QImage 或像素图（从 C++ 到 HTML）

Question

在 Qt 中，我想显示图像（例如 QImage）或从 C++ 到 WebEngine 的任何类型的像素图 html。如何做到这一点？

比如我的html（WebEngineView显示的）有：

<img src="???" id="myImg">

现在我希望能够通过 C++ 代码提供这张图片。所以我将生成此图像（使用某种算法）并希望在网络浏览器中显示它。

Answer 1

可以转成图片数据库base64

QByteArray ba;
QBuffer bu(&ba);
image.save(&bu, "PNG");
QString imgBase64 = ba.toBase64(QByteArray::Base64Encoding); // Qt 5.6

<img src="data:image/png;base64,"+imgBase64+"id="myImg">

Answer 2

这也可以使用自定义 UrlSchemeHandler 来完成。

class ImageLoaderUrlSchemeHandler : public QWebEngineUrlSchemeHandler
{
    Q_OBJECT
public:
    ImageLoaderUrlSchemeHandler(QObject *parent = Q_NULLPTR) : QWebEngineUrlSchemeHandler(parent) { }
    void requestStarted(QWebEngineUrlRequestJob *job)
    {
        QUrlQuery urlq(job->requestUrl());
        // use job->requestUrl().host(), job->requestUrl().fileName(), etc.
        // and urlq to get info from query
        QBuffer *respBuffer = new QBuffer;
        image.save(respBuffer, "BMP");
        // delete buffer after request completed
        connect(respBuffer, &QBuffer::aboutToClose, respBuffer, &QBuffer::deleteLater);
        job->reply("image/bmp", respBuffer);
    }
};


// install handler for one page
webEngineView->page()->profile()->installUrlSchemeHandler(QByteArray("imldr"), new ImageLoaderUrlSchemeHandler(env));
// or use QWebEngineProfile::defaultProfile() for all pages


<img src="imldr://myapp/myhandler?param1=value1&param2=value2" id="myImg">

Qt 在 QtWebEngine 视图中显示 QImage 或像素图（从 C++ 到 HTML）

Qt Display QImage or pixel map in QtWebEngine view (from C++ to HTML)

c++

qt

user-interface

qimage

qtwebengine