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 29.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 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
    • jeremy_kJ Offline
      jeremy_kJ Offline
      jeremy_k
      wrote on 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 last edited by
        #20

        jeremy_k thanks it works great.

        1 Reply Last reply
        0
        • B Offline
          B Offline
          beemaneni
          wrote on 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 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 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 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 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
                  • jeremy_kJ Offline
                    jeremy_kJ Offline
                    jeremy_k
                    wrote on 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 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