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

Question

In Qt, I want to display image (for example QImage) or any kind of pixel map from C++ to WebEngine's html. How to do this?

For example, in my html (displayed by WebEngineView) there is:

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

And now I want to be able to provide this image from C++ code. So I will generate this image (with some algorithm) and I want to display it in web browser.

Answer 1

This also could be done using custom 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">

Answer 2

You can convert to image data 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">