1

我正在使用该方法将 HTML 内容注入 QML WebEngineViewloadHtml，并试图让它通过QQuickImageProvider加载图像。

到目前为止，我们已经成功地从 Qt 资源容器 (qrc) 加载图像，但这还不够灵活。

内容图像提供程序.cpp

#include "contentimageprovider.h"

#include <QDebug>

ContentImageProvider::ContentImageProvider() : QQuickImageProvider(QQuickAsyncImageProvider::Image)
{

}

QImage ContentImageProvider::requestImage(const QString &id, QSize *size, const QSize &requestedSize)
{
    qDebug() << __FUNCTION__ << id;
}

主文件

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QtWebEngine/QtWebEngine>

#include "contentimageprovider.h"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;

    QtWebEngine::initialize();

    engine.addImageProvider(QLatin1String("content-images"), new ContentImageProvider);

    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

main.qml

import QtQuick 2.7
import QtQuick.Window 2.2
import QtWebEngine 1.4

Image {
    source: "image://content-images/this-image-is-requested";
}

WebEngineView {
    Component.onCompleted: {
        loadHtml("<img src='qrc://images/this-image-is-displayed.png' /><img src='image://content-images/this-image-should-also-be-requested' />", "/");
    }
}

预期产出

requestImage "this-image-is-requested"
requestImage "this-image-should-also-be-requested"

实际输出

requestImage "this-image-is-requested"

并且在 WebEngineView 中显示通过 qrc 加载的图像，并为另一个显示损坏的图像。

有没有人能让这个工作？

4

1 回答 1

0

感谢@Xplatforms 指出假设QML WebEngineView 下的Chromium 引擎将与QML Quick 引擎交互并触发图像提供程序的初始错误。

解决方案是实现QWebEngineUrlSchemeHandler：

void ImageRequestHandler::requestStarted(QWebEngineUrlRequestJob *request)
{
    // request->requestUrl() is a QUrl
    QFile *image  = new QFile(QDir::currentPath() + "/storage/content/" + request->requestUrl().path() + ".png");

    // makes sure the image deletes itself when closing the file
    connect(image, &QIODevice::aboutToClose, image, &QObject::deleteLater);
    // close the file when the request job is done
    connect(request, &QObject::destroyed, image, &QIODevice::close);

    QMimeDatabase mimeDB;
    QMimeType mimeType = mimeDB.mimeTypeForFile(image->fileName());

    request->reply(mimeType.name().toUtf8(), image);
}

主文件

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;

    // web engine to provide content display
    QtWebEngine::initialize();

    // intercept requests from the web engine to provide locally loaded content and images
    ImageRequestHandler *imageRequestHandler = new ImageRequestHandler();
    QQuickWebEngineProfile::defaultProfile()->installUrlSchemeHandler("image", imageRequestHandler);

    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}
于 2018-04-10T22:57:03.067 回答