How to save the resulted Camera's control picture in Android

Hi there.

I'm still playing with the App Builder (and liking it more and more - great program David)

However, I just want to ask...

1. Take a picture with Camera - CameraGetPicture "Camera2" - works!

2. Assign it to an image control - SetAttribute "Image1" "src" "data:image/jpeg;base64,[Camera2.Data]" - works!

3. Now want to save it to android folder

If I look at the value in Camera2.Data, it still have my pre assigned image in, although I can see the new image.
I think I need to use the cordova ?
Something like...

Am I on the right track?

Hello fakie,

Maybe the easy way to save the image in a file can be to use the Cordova's "Files" plugin and the "FileWrite" and "FileRead" actions, because all of them are included "out-of-the-box" in App Builder. However remember we are deal with the Base64 representation of the image and text files: we must save the image's Base64 and we read that later from the text file.

Maybe other Cordova's plugins allows us to work with files in other ways and we can use it from App Builder just like any other Cordova's plugin not included "out-of-the-box". Certainly working with files from an HTML5 application are something difficult, and probably with good reasons: are you ready and agree if a web application (a website) read your system files? Probably not.

About your question, I am not sure if understand very well, since you are talking about your "Camera2.Data" variable stores the previously assigned image... but there is not a way to do that, since the Camera control doens't have something like an assigned image. So maybe you are talking about an Image control and miss something in the middle?...

Hello David.

Thanks for getting back to me!
Yes, my question was about the image control.

My original question should have been...
If I look at the value in Image1.Src, it still have my pre assigned image in "test.jpg", although I can see the new image.

I'm looking for the base64 data that are saved somewhere. i assigned it to Image1 via the
'SetAttribute "Image1" "src" "data:image/jpeg;base64,[Camera2.Data]"'
and I know it worked, since I can see the image.

Now I want to do some work with that base64 data in javascript. I want to convert it to a jpeg.
So my question is: What property/entity do I pass to my javascript?
Something like Image1.Base64Source ?
My javascript function would be something like :function b64toJpg(b64Data, contentType,) { ...}

I want to upload a jpeg rather than base64 - since base64 data is much bigger...

Hello fakie,

I am not sure if understand very well. Anyway, if you want to access the "[Camera2.Data]" variable from Javascript they are this in Javascript:

Anyway I want to investigate a little more about this, because the Camera control doens't offer right now other way than use the Base64 result. According to the documentation of the Cordova's Camera plugin we can get another possible kind of results, then I want to investigate about this other results and how we can deal with it the most easy way as possible.

P.S. If you don't want to wait, remember you can try to use the Camera plugin API directly instead the Camera control. Look at samples like "SendSMS" and "CordovaPlugins", and also look at the program's help file tutorial: "Cordova plugins".

Hello fakie,

I want to say a little more about this topic. Firstly I update AB right now with a couple of minor changes in the Camera control: now the "Quality" variable appear in the object inspector at designtime, and, I specify the JPEG as the encoding type for the captured image. Playing with the "Quality" variable and and the "TargetWidth" and "TargetWidth" ones, we may can get an smaller Base64 string to be uploaded, for example.

On the other hand, taking a look at the possible other results of the Camera's control, certainly they can give us the captured image's file URI, instead of their Base64 representation. The problem is what to do with that file URI... Certainly if we want to upload the captured image (not their Base64 representation) we must use another Cordova's plugin: the FileTransfer plugin, which is not included "out-of-the-box" in App Builder right now, but can be used like any other Cordova's plugin.

Maybe I can work in a FileTransfer included "out-of-the-box" in App Builder, but I can't promise nothing right now nor a time line. You can use it if you wanted right now, again, just like any other Cordova's plugin: using directly the plugin's Javascript API. However, and, said that, if we want a picture from the device's user, maybe we can achieve it without the usage of the Camera control.

We can use the Input File control (look at their "Accept" and "Capture" variables) in order to allow the user to get a picture from their device, and we can send the choosed image (not their Base64 representation) directly to our app's server, various samples shown how we can do it, like the "HttpClient" sample. This method has an additional advantage, and is that they work not only in Cordova's builded applications, but also in any modern browser. Take a look at the "ImagePick" and "ImagePick2" samples.

As an additional note, look at the "Camera", "Camera2", "Camera3" and "Camera4" samples. I just test right now the "Camera2" (for example) who take a picture from the camera and then upload the Base64 representation of the image: certainly they works acceptable in my device and with my internet connection: they take just a couple of seconds to upload the Base64 representation of the image. Then take a look at these samples if you are not take a look before!

Hope this information can help in some way!