Blur image (dynamic source)

helenebro

Hi,
I want display an image on Item and blur it.
I have tried this :

Item {
    property bool isReduc: true
    property variant value
    width: 400
    height: 500
    Image {
           id: image_bug
           anchors.fill: parent
           source: value ? value.image : "qrc:/image/Ressources/defaultImage.png";
       }

       FastBlur{
           id: blur
           anchors.fill: image_bug
           source: image_bug
           radius: 100
       }
}

I have a "black image".

If I don't force image size (comment "anchors.fill:parent), it works but my image isn't the right size
If I set "static" source (source: "qrc:/image/Ressources/defaultImage.png";), it works
But I can't have an image 400x500 blurred

Sam_George

Hi,
@helenebro did you get any way to do it?

Markkyboy

Despite this question being 4 years old, I'll answer it anyway.

@helenebro - your formatting is likely causing your issue as you have nested 'FastBlur' inside 'Image' preventing the effect from showing. After formatting and a little adjustment to your code, I came up with the following. I hope I understand you correctly. When I first tried your code, I also got a black 'rectangle'.

import QtQuick 2.12
import QtQuick.Window 2.12
import QtGraphicalEffects 1.0

Window {
    visible: true
    width: 640
    height: 580
    title: qsTr("Image_bug")

    Item {
        width: 200
        height: 300

        Image {
            id: image_bug
            width: 400; height: 500
            source: "image_bug.jpg"
        }

        FastBlur{
            id: blur
            anchors.fill: image_bug
            source: image_bug
            radius: 50
        }
    }
}

@Sam_George - does this help you at all?, please let me know either way, thanks.