Qt World Summit: Register Today!

Stronger way to render a QQuickItem (WebView) into an Image

  • Hi,

    Using the WebKit version of the Qt 5.4.0, I need to be able to print the content of a WebView :

    MenuItem {
    text: qsTr("&Print")
    onTriggered: {

    WebView {
    id: webView
    objectName: "view"
    anchors.fill: parent
    url: "myHtmlPage.htm"

    Because I can't see any answer from the QML part, I have tried with the C++ part:

    QmlItemPrinter::print(const QVariant &qmlItem)
    QQuickItem *item = qobject_cast<QQuickItem >( qmlItem.value<QObject>() );

    By googling, I have already tried different solution:

    1. The GrabWindow: -> Only works for the visible part of the WebView. But My webView have a contentHeigh of 23000.

    2. The grabToImage + ShaderEffectSource -> Image have the good size, but its contents is like the content of the resized grabWindow:
      ShaderEffectSource {
      id: webWiewShader
      height: webView.contentHeight
      width: webView.contentWidth
      live: false
      sourceItem: webView

    3. The QQuickPaintedImage: Yes but how can I implement its paint method ?

    4. The QSGTextureProvider seems to not work with big WebView content:
      QSGTextureProvider *textureProvider = item->textureProvider();
      QSGTexture *texture = textureProvider->texture();
      GLint internalFormat;
      glGetTexLevelParameteriv(GL_TEXTURE_2D, 0, GL_TEXTURE_COMPONENTS, &internalFormat); // get internal format type of GL texture
      QImage image(texture->textureSize(), QImage::Format_RGBX8888);
      glGetTexImage(GL_TEXTURE_2D, 0, internalFormat, GL_UNSIGNED_BYTE, image.bits());

    5. The QGraphicsObject: It seems that the WebView cannot be cast to the QGraphicsObject.

    My goal is to print the html content. I thank that a first way was to create a QImage from the WebView but maybe there is a simplest way.

    Does anyone have a suggestion ?

    Thanks in advance,

  • You can cast your webview to QQuickPaintedItem ( because QQuickWebView iherits it), it has paint(QPainter *) method. Just replace QPainter and call this function !

  • Hi Jalomic and thanks for you reply.
    I have tried your way but without sucess.

    1. The webview cannot be cast to QQuickPaintedItem
    2. The webvies can be cast to QQuickWebView but:
    • I need then to include webkit-private and qquick-private to my .pro
    • the QQuickWebView inherit from QQuickFlickable then QQuickItem but no QQuickPaintedItem
    • There is no paint method for QQuickWebView

  • @mperrinel Oh sorry. I used https://github.com/mardy/qt5webkit1 =) and forgot about webkit2

  • Thanks for the link. I have read it.

    It's very nice and can probably answer most of the case. But because it only works with a subset of QtQuickItem like image or text, I think that will not be enough for the webview. The biggest problem of the webview is it content height that can be very huge.
    The grabImage was a nice way, but I was blocked by a problem of memory. only about the first 2000 height was painted...

Log in to reply