Important: Please read the Qt Code of Conduct -

Show QPixmap in Webpage

  • Hey to all,

    I am working on my first Qt project in which a client wants to use his HTML5 GUI to control an image processing software. The interaction of buttons and displayed text between Qt and the webview works like a charm so far but I am getting very frustrated with showing images:
    According to the documentation "QtWebKit Bridge": I implemented a QObject (which contains my QPixmap) and send it to my webpage via addToJavaScriptWindowObject. In my HTML file the JS function that is called after loading tries to draw this Pixmap either to an <img> element or a <canvas> via this code:
    var context = document.getElementById("canvasElement").getContext("2d");

    I read in a "bug report": that "assignTo" replaces the "assignToHTMLImageElement". Sadly neither of these methods work even tough I am sure the QPixmap is transferred to JS as I can read the height and width. Do you have any idea why this could be happening?

    Or maybe do you have another alternative way of showing images that were processed in my Qt app in the HTML window? I even need to update these images very quickly (should be up to 30 FPS)...

    Thanks for your help.

  • I found a way to make this work (sorta)

    My HTML page has an <img> element (positioned offscreen) and a canvas element positioned onscreen.

    I used assignToHTMLImageElement to copy my QPixmap into the <img> element.

    I then did canvas.getContext("2d").drawImage(img, 0,0) to copy the <img> into the canvas.

    The result is a canvas that displays the QPixmap. But there also exists an offscreen copy in the <img> tag which seems "expensive" but it does get the job done and performance seems fine (I too needed to show upward of 30fps, and it works just fine.)

    It does seem like the API should have a call "assignToHTMLCanvasElement" or, assignToHTMLImageElement should be fixed to allow the QPixmap to be assigned directly to a canvas element.

Log in to reply