Qt使用ShaderEffect进行QImage渲染

Question

我想知道是否可以通过 Qt Quick 或 C++ 对图像使用着色器效果，然后在应用效果后保存它。

这样做的原因是为了实现 opengl 辅助图像效果操作（即浮雕、像素化等）

我试过这个：

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");
            });
        }
    }
}

正在对图像应用简单的灰度效果。它在屏幕上有效，但 grabToImage() 不应用效果。

有什么办法吗？

Answer 1

好吧，这很简单，我通过用 Item 元素包装图像并从中抓取图像来解决问题：

    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");
            });
        }
    }
}

希望这对其他人有帮助:-)

Qt使用ShaderEffect进行QImage渲染

Qt Use ShaderEffect for QImage rendering

opengl

shader

qt