Forums

OverviewFelgo 2 Support (Qt 5) › How to save UserImage { } in user mobile phone?

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #18892

    Niyazi

    Hi,

    In my demo app I use UserImage { }. I need to save user image in users phone. So next time user open the app it shows its picture. And I need the UserImage edit properties in my other settings page. So user can change the picture if they want it. So what is the step to save my user image in phone and use it next time the app starts?

    #18902

    Günther
    Felgo Team
    #18906

    Niyazi

    Thanks Gunther,

    But I don’t need to use the Felgo Game Network service in my app. I need to use UserImage component and save the user picture in to mobile using the Storage component if possible. I will check the link that you provided to see if I can make it to work without using the game network.

    #18909

    Günther
    Felgo Team

    Working with native device storage is not provided e.g. by NativeUtils component at the moment. This is also handled differently for iOS or Android, so different implementations are required.

    Thus, it’s easiest to use the game network service, which stores the user image in the cloud. For storing your own images, you can also take advantage of the uploadImage function, which works independent from game network profile images of your users.

    Best,

    Günther

    #18910

    Niyazi

    Thanks Gunther,

     

    Below is modified code from Component Showcase UserImage. It is working. But I need to save the picture to user mobile using Storage Component.

    But reading your post this is not possible at the moment. Am I right?

     

    In the QT World Summit 2016 app there is a Profile menu in left drawer. I can take picture using my mobile camera and when I hit okay button app crashes.

    Maybe I can use some C++ (hard way) part to save the image to user mobile. And I will check  the uploadImage function.

     

    
    
                    Item {
                        anchors.horizontalCenter: mainColumn.horizontalCenter
                        width: CbStyle.appHeight * 0.13
                        height: width
                        //color: "green"
    
                        // UserImage    nativeUtils
                        UserImage {
                            id: userImage
                            property string iconFontName: Theme.iconFont.name
                            width: CbStyle.appHeight * 0.13
                            height: width
    
                            placeholderImage: "\uf007"
                            source: ""
    
                            editable: true
                            editBackgroundColor: Theme.tintLightColor //.tintColor
    
                            property bool shownEditPhotoDialog: false
    
    
                            onEditClicked: {
                                if (system.desktopPlatform) {
                                    nativeUtlis.displayImagePicker(qsTr("Choose Photo"))
                                }
                                else {
                                    shownEditPhotoDialog = true
                                    nativeUtils.displayAlertSheet("", [qsTr("Choose Photo"), qsTr("Take Photo"), qsTr("Reset Photo")], true)
                                }
                            }
    
                            Connections {
                                target: nativeUtils
                                onAlertSheetFinished: {
                                    if (userImage.shownEditPhotoDialog) {
                                        if (index == 0)
                                            nativeUtils.displayImagePicker("Choose Photo")
                                        else if (index == 1)
                                            nativeUtils.displayCameraPicker()
                                        else if (index == 2)
                                            UserImage.source = ""
    
                                        userImage.shownEditPhotoDialog = false
                                    }
                                }
    
                                // Resim Seç
                                onImagePickerFinished: {
                                    //console.debug("Resim Seç dosya yolu:", path)
                                    if(accepted)
                                        userImage.source = Qt.resolvedUrl(path)
    
                                    //userImage.editBackgroundColor = "#000000"
                                    userImage.placeholderImage = ""
                                    userImage.editable = false
                                }
    
                                // Resim Çek
                                onCameraPickerFinished: {
                                    //console.debug("Resim Seç dosya yolu:", path)
                                    if(accepted)
                                        userImage.source = Qt.resolvedUrl(path)
    
                                    //userImage.editBackgroundColor = "#000000"
                                    userImage.placeholderImage = ""
                                    userImage.editable = false
                                }
    
                            } // Connections
                        } // UserImage
    
                        DropShadow {
                            anchors.fill: userImage
                            horizontalOffset: 2
                            verticalOffset: 2
                            radius: 10
                            samples: 17
                            color: "#ffffff"
                            source: userImage
                        }
    
                    }
    

     

    #18912

    Günther
    Felgo Team

    The Storage component only allows to store key-value pairs of strings. To locally cache your image with the Storage, you would thus need to store the actual image data in string format, e.g. base 64 encoded. So this also requires some additional conversions and work.

    If you choose this approach, you should then be able to show the base 64 encoded image string with QML Image this way: (did a short research myself)

    Image {
        source: "data:image/png;base64," +base64imageData
    }

    Never tested this feature before though.

    Best,
    Günther

    #18913

    Niyazi

    Thanks Gunther. Seems this is a good idea to try.

    #19625

    Didier

    I can convert the UserImage image, that is, the one in “userImage.source = Qt.resolvedUrl (path)” in base 64, to be able to upload it to a service, and try:

    Image {
      source: "data: image / png; base64," + base64imageData
    }

    but it does not work, the image is uploaded damaged. My server takes the photos in base 64 and converts them to bytes, I test it directly on the server and it works, but since V-play it does not. (if I can consult them)

    Try this:

    onImagePickerFinished: {
      console.debug ("Image picker finished with path:", path)
      if (accepted)
      userImage.source = Qt.resolvedUrl (path)
      fotoruta = Qt.resolvedUrl (path)
      // fotoruta = MyImageUrl2Base64.getImageDataByUrl (path)
      var c64base = Qt.btoa (path) // Qt.btoa (path) // 1st intent
    
      var c64base = "data: image / png; base64," + userImage.source
    
      console.debug ("Photo:", photo)
      console.debug ("Photo64:", c64base)
      // post2Server (path)
      PhotosAdd (c64base)
      errorMsg.text = "Upload OK."
    }

     

     

    #19629

    Günther
    Felgo Team

    Hi Didier,

    the image-picker returns the image path of your chosen image, but not the actual image data of the file.
    If you want to use a base64 encoded image as the source, you need to get the data of the actual image, not the path of the image.

    Best,
    Günther

    #19631

    Didier

    How do I get the real image data?

    #19644

    Alex
    Felgo Team

    Hi Didier,

    after we’ve sent you the example project already, I am just adding this code piece here for other developers.

    It’s a C++ function from a custom class named ImageEncoder. It takes the image path returned from e.g. the camera picker, reads the binary image data and encodes it into Base64:

    QString ImageEncoder::getBase64(const QString &path)
    {
      // convert image path to local file path
      QString filePath = QUrl(path).toLocalFile();
      qDebug() << "File path: " + filePath;
      QFile file(filePath);
      if (!file.open(QIODevice::ReadOnly)) {
        qWarning() << "ERROR: can't open file: " << path;
        return "";
      }
      // read contents
      QByteArray contentBinary = file.readAll();
      // convert to base64
      QString contentBase64 = QString(contentBinary.toBase64());
      return contentBase64;
    }

    Cheers,
    Alex

Viewing 11 posts - 1 through 11 (of 11 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support