Qt Use ShaderEffect for QImage rendering - qt

Question

I was wondering if it is possible via Qt Quick or C++ to use a shader effect on a image and then save it with the effect applied.
The reason for doing this is to achieve opengl assisted image effect manipulation (ie. emboss, pixelize, etc)
I tried this:
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Dialogs 1.2
ApplicationWindow {
id: root
title: qsTr("Hello World")
width: 640
height: 480
visible: true
Image {
id: effectImage
width: 200
height: 200
sourceSize.width: width
sourceSize.height: height
anchors.centerIn: parent
source: "qrc:/myimage.png"
layer.enabled: true
layer.effect: ShaderEffect {
fragmentShader: "
uniform lowp sampler2D source; // this item
uniform lowp float qt_Opacity; // inherited opacity of this item
varying highp vec2 qt_TexCoord0;
void main() {
lowp vec4 p = texture2D(source, qt_TexCoord0);
lowp float g = dot(p.xyz, vec3(0.344, 0.5, 0.156));
gl_FragColor = vec4(g, g, g, p.a) * qt_Opacity;
}"
}
}
Button {
id: grabIt
anchors.top: effectImage.bottom
text: qsTr("Grab")
onClicked: {
effectImage.grabToImage(function(result) {
console.debug("hallo");
result.saveToFile("test.jpg","jpg");
});
}
}
}
Applying a simple grayscale effect on the image. It works on-screen, but grabToImage() does not apply the Effect.
Is there any way to do this?

Answer 1

OK that was easy, I solved the problem by wrapping the image with an Item element and grabbing the image from that instead:
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Dialogs 1.2
ApplicationWindow {
id: root
title: qsTr("Hello World")
width: 640
height: 480
visible: true
Item {
id: effectImage
width: 200
height: 200
anchors.centerIn: parent
Image {
anchors.fill: parent
sourceSize.width: width
sourceSize.height: height
source: "qrc:/myimage.png"
layer.enabled: true
layer.effect: ShaderEffect {
fragmentShader: "
uniform lowp sampler2D source; // this item
uniform lowp float qt_Opacity; // inherited opacity of this item
varying highp vec2 qt_TexCoord0;
void main() {
lowp vec4 p = texture2D(source, qt_TexCoord0);
lowp float g = dot(p.xyz, vec3(0.344, 0.5, 0.156));
gl_FragColor = vec4(g, g, g, p.a) * qt_Opacity;
}"
}
}
}
Button {
id: grabIt
anchors.top: effectImage.bottom
text: qsTr("Grab")
onClicked: {
effectImage.grabToImage(function(result) {
console.debug("hallo");
result.saveToFile("test.jpg","jpg");
});
}
}
}
Hope this helps someone else :-)