Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to save an image from QML Image element?
Forum Updated to NodeBB v4.3 + New Features

How to save an image from QML Image element?

Scheduled Pinned Locked Moved QML and Qt Quick
27 Posts 12 Posters 28.8k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • Q Offline
    Q Offline
    qomg
    wrote on 28 Jun 2014, 02:52 last edited by
    #15

    Hi

    I also have an empty pointer. I do not know where to look to solve this problem.

    1 Reply Last reply
    0
    • J Offline
      J Offline
      jeremy_k
      wrote on 28 Jun 2014, 03:09 last edited by
      #16

      For Qt 5 and later, "Canvas":http://qt-project.org/doc/qt-5/qml-qtquick-canvas.html has loadImage(url) and save(filename) functions.

      Asking a question about code? http://eel.is/iso-c++/testcase/

      1 Reply Last reply
      0
      • V Offline
        V Offline
        Vincent007
        wrote on 28 Jun 2014, 03:24 last edited by
        #17

        wait for QQuickRenderControl

        1 Reply Last reply
        0
        • Q Offline
          Q Offline
          qomg
          wrote on 28 Jun 2014, 03:38 last edited by
          #18

          I tried to use the Canvas, and also I could not save.
          I'll try again tomorrow ..

          1 Reply Last reply
          0
          • J Offline
            J Offline
            jeremy_k
            wrote on 28 Jun 2014, 04:54 last edited by
            #19

            Image loading and saving via Canvas:

            @import QtQuick 2.2
            import QtQuick.Window 2.1

            Window {
            width: imgLoader.sourceSize.width
            height: imgLoader.sourceSize.height
            visible: true
            property string loadUrl: "file://tmp/image.png"
            property string saveUrl: "/tmp/i2.png"

            Canvas {
                id: root
                anchors.fill: parent
                onPaint: {
                    var ctx = getContext("2d")
                    ctx.drawImage(imgLoader, 0, 0)
                }
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    if (root.save(saveUrl)) {
                        console.log("save succeeded")
                    }
                    else {
                        console.log("save failed")
                    }
                }
            }
            Image {
                id: imgLoader
                visible: false
                source: loadUrl
            }
            

            }@

            Note that the parameter to Canvas::save() is a filename, not a URL. It fails when "file://tmp/i2.png" is used.

            Asking a question about code? http://eel.is/iso-c++/testcase/

            1 Reply Last reply
            0
            • Q Offline
              Q Offline
              qomg
              wrote on 28 Jun 2014, 14:21 last edited by
              #20

              jeremy_k thanks it works great.

              1 Reply Last reply
              0
              • B Offline
                B Offline
                beemaneni
                wrote on 1 Aug 2014, 07:57 last edited by
                #21

                Hi
                does the above code really draw an image in the given path?
                For me the file gets created but nothing in it... i have given save url as "/storage/sdcard0/a1.png".

                Can u help me ?

                Thanks in Advance,,

                Bala B
                Infinite Computer systems
                Chennai

                1 Reply Last reply
                0
                • D Offline
                  D Offline
                  DonRico
                  wrote on 1 Aug 2014, 08:12 last edited by
                  #22

                  Hi

                  I decided to solve this a bit differently. I created a new QML type (c++ class) that takes in image url (local or remote) and spits out local url. In case of beginning http:// or https:// class checks if image is already downloaded from the remote server and in that case spits the local url right out w/o wasting the precious mobile data bandwidth.And then there a QML component that fills out the Image type source property when the local url is returned from my so called "Caching class". If anybody's interest I can strip it out of my project and put it up to github with decent comments.

                  1 Reply Last reply
                  0
                  • B Offline
                    B Offline
                    beemaneni
                    wrote on 1 Aug 2014, 08:44 last edited by
                    #23

                    Hi DonRico
                    If u can post that code that would be an great help for me...can u?

                    Thanks

                    Bala B
                    Infinite Computer systems
                    Chennai

                    1 Reply Last reply
                    0
                    • D Offline
                      D Offline
                      DonRico
                      wrote on 1 Aug 2014, 08:52 last edited by
                      #24

                      Ok, I'll try to find some spare time to separate it and put it.

                      1 Reply Last reply
                      0
                      • D Offline
                        D Offline
                        DonRico
                        wrote on 4 Aug 2014, 07:33 last edited by
                        #25

                        Ok, the exmaple project is available in https://github.com/DonRico/QT-Image-Caching . There might be some issues since I've written QT for 2mos for now but it should give you the general idea.

                        1 Reply Last reply
                        0
                        • J Offline
                          J Offline
                          jeremy_k
                          wrote on 4 Aug 2014, 21:50 last edited by
                          #26

                          Caching can also be handled with a "QQuickImageProvider":https://qt-project.org/doc/qt-5/qquickimageprovider.htmlQQuickImageProvider.

                          After defining and register a provider, image urls can be written as "image://ProviderName/path/to/image".

                          The same concept exists for Qt 4 in the form of QDeclarativeImageProvider.

                          Asking a question about code? http://eel.is/iso-c++/testcase/

                          1 Reply Last reply
                          0
                          • C Offline
                            C Offline
                            chuahanmandis
                            Banned
                            wrote on 19 Dec 2018, 11:32 last edited by
                            #27
                            This post is deleted!
                            1 Reply Last reply
                            0

                            • Login

                            • Login or register to search.
                            • First post
                              Last post
                            0
                            • Categories
                            • Recent
                            • Tags
                            • Popular
                            • Users
                            • Groups
                            • Search
                            • Get Qt Extensions
                            • Unsolved