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渲染

1 个答案: