Canvas resize

[qomg]

I'm trying to do so in order to "Canvas" accepted dimensions of the image. I need this is because I write "Canvas" to the file. All the time I get tired of that "Canvas" does not accept the dimensions of the new image. Maybe there is a person who knows how to solve it?

Here is my broken code:

@import QtQuick 2.2
import QtQuick.Controls 1.1

ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")

menuBar: MenuBar {
    Menu {
        title: qsTr("File")
        MenuItem {
            text: qsTr("Exit")
            onTriggered: Qt.quit();
        }
    }
}

Image {
    id: myImage
    source: "http://i.snag.gy/5VVZR.jpg"
}

Canvas {
    anchors.bottom: parent.bottom
    width: myImage.width
    height: myImage.height

    onPaint: {
        var ctx = getContext("2d")
        ctx.drawImage(myImage, 0, 0)
    }
}

MouseArea {
    anchors.fill: parent

    onClicked: {
        myImage.source = "http://i.snag.gy/qLdPZ.jpg"
    }
}

}@

[p3c0]

Hi,

bq. “Canvas” does not accept the dimensions of the new image

Do you mean you want to draw the image using canvas with certain width and height ?
If so, then you can try this overloaded function
@
ctx.drawImage(myImage, 0, 0,50,50)
@

will draw image of dimension 50x50

[qomg]

I want to "Canvas" always accept what the image dimensions will be loaded.
I also tried like you say.
@import QtQuick 2.2
import QtQuick.Controls 1.1

ApplicationWindow {
visible: true
width: 640
height: 480
color: "blue"
title: qsTr("Hello World")

menuBar: MenuBar {
    Menu {
        title: qsTr("File")
        MenuItem {
            text: qsTr("Exit")
            onTriggered: Qt.quit();
        }
    }
}

Image {
    id: myImage
    source: "http://i.snag.gy/5VVZR.jpg"
    //onWidthChanged: myCanvas.width = width
    //onHeightChanged: myCanvas.height = height
}

Canvas {
    id: myCanvas
    anchors.bottom: parent.bottom
    width: myImage.width
    height: myImage.height

    onPaint: {
        var ctx = getContext("2d")
        ctx.drawImage(myImage, 0, 0)
        //ctx.drawImage(myImage, 0, 0, myImage.width, myImage.height)
    }
}

MouseArea {
    anchors.fill: parent

    onClicked: {
        myImage.source = "http://i.snag.gy/qLdPZ.jpg"
        //myCanvas.requestPaint()
    }
}

}
@

[p3c0]

Sorry, but i'm not actully understanding your question.
Do you want to set the width and height of Canvas to that of myImage ?

[qomg]

bq. Sorry, but i’m not actully understanding your question.
Do you want to set the width and height of Canvas to that of myImage ?

Yes. I want to canvas element always have the same dimensions as the image even if I load another image with different dimensions.

[p3c0]

Then your 1st code works as expected. I tested with Qt5.3.1

[qomg]

I have Qt 5.3. For me it looks like this.
http://i.imgur.com/XT4j1E5.png
http://i.imgur.com/icVU9nq.png

Share your snapshots.

[p3c0]

Here:

http://imgur.com/KxXvvs0

[p3c0]

May be it is taking time to load the other image on your network and hence unable to determine the size.
You could try getting the "status":http://qt-project.org/doc/qt-5/qml-qtquick-image.html#status-prop of it and then assigning the dimensions.

[qomg]

I will install qt again. This may solve the problem.

[qomg]

I struggled with this for a few days, and the problem was solved by reinstalling Qt :)

Thanks p3c0

[p3c0]

That's strange. Did you notice anything during reinstallation that you might have missed in first ?