Qt使用ShaderEffect進行QImage渲染

Question

我想知道是否可以通過Qt Quick或C++在圖像上使用着色器效果，然後將其保存並應用效果。

之所以這樣做，是實現OpenGL的輔助圖像效果處理（即浮雕，pixelize等）

我嘗試這樣做：

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

確定這很簡單，我用一個項目元素包裹的圖像，並從抓代替圖像解決了這個問題：

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

希望這有助於別人:-)