[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?

[GüntherFelgo Team]

Hi Niyazi,

the easiest way is to take advantage of the Felgo Game Network service to manage user profiles and pictures. A default profile view with changeable user-name and picture is available with the SocialView.

See here for a guide how to use the view: https://felgo.com/cross-platform-app-development/how-to-add-chat-service-and-cross-platform-leaderboard-with-user-profiles-to-your-ios-or-android-app

Best,
Günther

[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.

[GüntherFelgo 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

[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
                    }

                }

 

[GüntherFelgo 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

[Niyazi]

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

[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."
}

 

 

[GüntherFelgo 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

[Didier]

How do I get the real image data?

[AlexFelgo 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