[webkit-qt] Image capture of the contents of a QML WebView

[Olivier Tilloy]

An update on my work on generating thumbnails for web pages:

I solved my problem by writing a custom QQuickItem that, when updated, 
renders the webview into a FBO and saves the contents of that FBO to a 
file. The WebviewThumbnailer (as I named it) is not updated by default, 
it has to be requested explicitly. I’ve implemented it in the Ubuntu 
Touch web browser. For those interested, see the code here:

 
http://bazaar.launchpad.net/~phablet-team/webbrowser-app/trunk/view/head:/src/Ubuntu/Components/Extras/Browser/webview-thumbnailer.h
 
http://bazaar.launchpad.net/~phablet-team/webbrowser-app/trunk/view/head:/src/Ubuntu/Components/Extras/Browser/webview-thumbnailer.cpp

and how I’m using it in QML:

 
http://bazaar.launchpad.net/~phablet-team/webbrowser-app/trunk/view/head:/src/Ubuntu/Components/Extras/Browser/UbuntuWebView.qml#L192

This seems to be working pretty well. I’m no QML guru, so feedback and 
remarks are very welcome!

Cheers,

  Olivier


Olivier Tilloy a écrit :
> On 2013-05-23, Jocelyn Turcotte <jocelyn.turcotte at digia.com> wrote:
>> Hello,
>>
>> if you want a QImage you should have a look at
>> QQuickWindow::grabWindow().
>> It only works on the whole scene, so currently you would have to cut
>> the part that interests you out of the QImage.
>
> Thanks for the pointer. The documentation for this method says "Warning:
> Calling this function will cause performance problems". Not very
> reassuring… And having to extract a part of the image is not a fun
> prospect either.
>
>
>> On Thu, May 23, 2013 at 09:20:18AM +0200, Martin Leutelt wrote:
>>> I guess that what you want to do could be achieved in several ways,
>>> depending on
>>> which version of Qt/QML you're using.
>>> Assuming you're using QtQuick1:
>
> I’m using Qt5 and QtQuick2.
>
>>> If you're using QtQuick2:
>>> - also use ShaderEffectSource
>>> - write a QML-plugin again, grab the whole screen of your application
>>> an cut out
>>> the area of the item you're interested in by using the coordinates
>>> that you
>>> passed to the plugin
>>>
>>> I think that the solution using shaders would fit your purpose fine,
>>> unless you
>>> really need to have the 'screenshots' as real files. Hope that helps.
>
> Yeah, I actually need to cache the image to a file. I’ve looked a bit
> into the ShaderEffect idea, and I think if I write a custom one, I
> should be able to render the node to a FBO and save it to a file. I have
> yet to give it a shot. When that happens, I’ll keep you posted with the
> results.
>
> Thanks,
>
>   Olivier